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        
</div>

JsFiddle example.

2 thoughts on “Why doesn’t height: 100% work to expand divs to the screen height?”

  1. My partner and I stumbled over here different web page and thought I might
    check things out. I like what I see so now i am
    following you. Look forward to finding out about your web page again.

    Reply
  2. Thank you for another fantastic post. Where else may just anyone get that kind of
    information in such an ideal method of writing?
    I have a presentation subsequent week, and I’m at the search
    for such information.

    Reply

Leave a Comment