Question

How can I set an html element to have a 100% height on a page that has a fixed height header? The layout is, of course, not fixed height.

I already have the html and body set to simulate min-height: 100% correctly.

---

I have tried the following ideas, but to no avail:

1. I have used the following CSS, but it uses a percentage-based height, which doesn’t work well because my layout’s header is a fixed 81px in height.

#divContent
{
    height: 82%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    width: 950px;
}

2. I have used the following in various combinations of the padding and margin, but all of them expand the height of the page (which is hidden), thereby making them all look the same: the bottom 81px are hidden.

html, body
{
    overflow: hidden;
    margin-bottom: 82px;
    padding-bottom: 82px;
}
#divContent
{
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    width: 950px;
    margin-bottom: 82px;
    padding-bottom: 82px;
}

I want my divContent to consume all of the body’s height minus 81px.

I know how I could immediately do it using tables, but that would be improper use of tables. I also figure that it could be automatically calculated using jQuery, but I haven’t written jQuery like that before.

P.S. I have looked through about a dozen questions and cannot find a solution. If you can prove this is a duplicate that actually covers the same issue, I would gladly read that other post.

Answer 1

Set the bottom of the div to 0px. This will expand the div to consume the rest of the page

#divContent
{

    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    bottom: 0px;   
    width: 950px;
}

Here is a very similar question I answered a while back

How to build this layout with CSS?