title: Height CSS Percent Not Working
body: <p>I'm trying to adjust the height of a picture by a percentage, rather than a pixel.  However, when I use <code>height: 30%;</code> it doesn't work, but <code>height: 30px;</code> does work.  What am I doing wrong?</p>
  
  <p>My snippet is mind boggingly easy.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.imagebanner {
    height: 30%;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://localhost/wordpress/wp-content/uploads/2016/11/Welding-banner.jpg" alt="welding-banner" class="imagebanner" /&gt;</code></pre>
  </div>
  </div>
  </p>