Make a div fit the height of the page

bumbala · 25 Apr 2010, 08: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:

Code:

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:

Code:

<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, 01: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.

Code:

<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

Thread: Make a div fit the height of the page

Thread Tools

Make a div fit the height of the page

Similar Threads

Help wanted embedding a MySpace page in a frame (or div)

Posting Permissions