HTML - div to take 100% of remaining page height - html

Question

Please look at the following: http://jsfiddle.net/ran5000/uZ7dD/
the header div has a fixed height of 40px, I want that the content div will use the remaining height of the screen without scroll and regardless of the screen height.
any ideas?

Answer 1

I generally use position:absolute for this, and then set the top value to start at the bottom of the header.
http://jsfiddle.net/uZ7dD/4/
.content {
background-color: yellow;
position:absolute;
top:40px; bottom:0; left:0; right:0;
}

Answer 2

Do you mean like that?
If so, I've used
position: fixed;
property in CSS.

Answer 3

I'm not sure what the browser support is like for the calc CSS feature, but this would be a good case for it. You can read about it here. You would need to change the height of the content div to height: calc(100% - 40px). This, of course doesn't take into account any space taken up by margin, padding, or border so it will still overflow a bit. If you make sure your divs don't have any of those it works perfectly. Here is my JSFiddle for it.
You can also use position: absolute and set the top value to 40px and the bottom to 0px but your parent element needs to have position: relative set.
Alternatively, you can use JavaScript/jQuery to calculate the required height of the content div and apply it.

Answer 4

For css3 browsers just use:
.content {
width: 100%;
background-color: yellow;
height: -moz-calc(100% - 40px);
height: -webkit-calc(100% - 40px);
height: -o-calc(100% - 40px);
height: calc(100% - 40px);
}
for non-css3 browsers use this workaround,
HTML:
<div class="container">
<div class="header">i am the header</div>i am the <content></content>
</div>
CSS
.header {
width: 100%;
height 40px;
line-height: 40px;
background-color: blue;
}
.container{
height: 100%;
background-color: yellow;
}
Hope I could help :)

Answer 5

In this case, the properties of table elements have some advantage in the fact that they have a lot of positioning power. In this case specifically, table rows and cells will always adjust to fill the table container.
Obviously, you don't want to be using actual table html elements, as that would not be semantic, which is where css comes into the game:
If you put a container/wrapper element around both your header and content, and then set it to be display: table; with 100% height and width it will act as the base table element.
Setting your header and content to display: table-row; will now associate them with that container and allow everything to share the table properties. Setting a fixed height on one will still work, and the other will simply fill the remaining space.
<div class="container">
<div class="header">i am the header</div>
<div class="content">i am the <content></content></div>
</div>
And the css:
.container { display: table; width: 100%; height: 100%; }
.header, .content { display: table-row; }
This approach also has the benefit of being well supported across browsers.