Designoplasty Web Design and Development Blog

Here was my problem, I had some divs absolutely positioned at the top and bottom of the body element and I needed the div at the bottom to be at the bottom of the window even if the body wasn’t tall enough to reach the bottom of the window. Here’s the solution:

*
{
    margin: 0px;    /* I include this just because I always do it and for this */
    padding: 0px;   /* example it will ensure the bottom is truly the bottom. */
}

html
{
    height: 100%;
}

body
{
    min-height: 100%;
}

I’m not entirely sure why the html element has to have a height of 100%, but it does. What’s interesting is if you apply a background to the html element it will fill the whole viewport, maybe the extra space is considered padding or something.

Some other examples on the web for other things will show the body having a height of 100% instead of min-height. This will put any absolutely position elements on the bottom at the bottom of the viewport instead of the bottom of the body.