title: CSS – why doesn’t percentage height work?
body: <p>How come a percentage value for <code>height</code> doesn’t work but a percentage value for <code>width</code> does?</p>
  
  <p><a href="http://jsfiddle.net/g3Yzt/" rel="noreferrer">For example</a>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="working"&gt;&lt;/div&gt;
  &lt;div id="not-working"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#working{
      width:80%;
      height:140px;
      background:orange;
  }
  #not-working{
      width:80%;
      height:30%;
      background:green;
  }
  </code></pre>
  
  <p>The width of <code>#working</code> ends up being 80% of the viewport, but the height of <code>#not-working</code> ends up being 0.</p>