html – Why doesnt height: 100% work to expand divs to the screen height?

html – Why doesnt height: 100% work to expand divs to the screen height?

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

So, youve 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        
</div>

JsFiddle example.

Since nobody has mentioned this..

Modern Approach:

As an alternative to setting both the html/body elements heights to 100%, you could also use viewport-percentage lengths:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

In this instance, you could use the value 100vh (which is the height of the viewport) – (example)

body {
    height: 100vh;
}

Setting a min-height also works. (example)

body {
    min-height: 100vh;
}

These units are supported in most modern browsers – support can be found here.

html – Why doesnt height: 100% work to expand divs to the screen height?

You will also need to set 100% height on the html element:

html { height:100%; }

Leave a Reply

Your email address will not be published.