Monday, April 3, 2017

How to make HTML body tag take 100% of height

It's always good to remember how to make body tag to occupy 100% of document height.

Here's a little reminder from Stack Overflow:


up vote202down voteaccepted
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>

No comments:

Post a Comment

Ubuntu 12.04, 14.04, 16.04 - auto start an app or script before login

To run a command or application at startup, even before the user has logged in, you can use this file: /etc/rc.local The commands entered...