Why doesn’t height: 100% work to expand divs to the screen height?

In order for a percentage value to work for height, the parent’s height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you’ve given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;

And your code should work fine.

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
#fullheight {
    width: 250px;
    background: blue;
<div id=fullheight>
  Lorem Ipsum        

JsFiddle example.

Leave a Comment