PDA

View Full Version : Make a div fit the height of the page


bumbala
25 Apr 2010, 09:48 AM
Hi experts,

I am developing a website with a header (with variable height) and a content below. My problem is that I can't make the content div cover the whole page height.
My css is like this:



html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}

#header {
width: 100%;
}

#content {
height: 100%;
width: 100%;
}


And my html code is like this:


<html>
<body>
<div id="header">blah blah blah</div>
<div id="content"></div>
</body>
</html>


The content div does not have anything in it. It is empty.

In this case, the height of the content exceeds the page height and scrollbars appear. How can I exactly fit the content div to page height?

Thank you.
Wickham
25 Apr 2010, 02:30 PM
If you put the #header inside the #content div, the #content div will then be 100% of the height and the #header can still be a variable height inside it.


<body>
<div id="content">
<div id="header">blah blah blah</div>
</div>
</body>

This shows something similar although it has a header tag instead of a header div:-
http://www.wickham43.net/fullheightdiv.php