100% height for div containers?

**bassa** · 10-12-2008, 11:03 AM

I am trying to get the height of my main content container reach all the way to the bottom of the page, regardless of the visitors screen size and resolution.

Here's the CSS code:

Code:

#maincontent {
	width:960px;
	height:100%;
	border-right: 10px solid #561414;
	border-left: 10px solid #561414;
	background: #FFFFFF;
	margin: 0px auto;
}

Nothing I do seems to work?

Cheers,
Bassa

**Medyman** · 10-12-2008, 01:32 PM

You have to set the height of all the parent elements of #maincontent for 100% height to register. Otherwise, browsers can't read what height you want #maincontent to be 100% of.

**bassa** · 10-12-2008, 04:57 PM

Yeah, but check these out...

Div Container here:

Code:

<div id="main">Content for  id "main" Goes Here</div>

CSS for Div Container:

Code:

#main {
	width:960px;
	height:100%;
	border-right: 10px solid #561414;
	border-left: 10px solid #561414;
	background: #FFFFFF;
	margin: 0px auto;
}

"margin: 0px auto;" is used to center the Div Container in the Body of the HTML page.

And the Body in the CSS looks like this:

Code:

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background: #FFFFFF url(../images/bg_tile.gif);
	font-family: Verdana;
	text-decoration: none;
	font-size: 16px;
	text-align: center; /* For IE */
}

This should work. But when I test this in IE, it only shows a 10px container at the top of the window.

What gives?

**bassa** · 10-12-2008, 05:02 PM

Oh, and for the record, I have removed parent containers, so the #main container shown above is alone in the HTML markup.

**molendijk** · 10-12-2008, 05:13 PM

Code:

body {
position:absolute;margin-top:0;height:100%
} 
#maincontent {
	width:960px;
	height:100%;
	border-right: 10px solid #561414;
	border-left: 10px solid #561414;
	background: #FFFFFF;
	margin: 0px auto;
}

Arie Molendijk

**bassa** · 10-12-2008, 07:33 PM

Thanks man!

**Medyman** · 10-12-2008, 07:42 PM

Originally Posted by molendijk

Code:

body {
position:absolute;margin-top:0;height:100%
} 
#maincontent {
	width:960px;
	height:100%;
	border-right: 10px solid #561414;
	border-left: 10px solid #561414;
	background: #FFFFFF;
	margin: 0px auto;
}

There is no purpose in the position:absolute; In fact, it'll cause you troubles in some instances. The real solution is in the height:100%.

Like I said, you need height:100% defined on ALL parent elements. This includes <body> and <html>.

**bassa** · 10-12-2008, 08:01 PM

Getting a little closer. The containers are looking good, although my text container seems to span the height alot, so that even on my high 1920x1200 resolution, I have to scroll down to see the footer.

Below the big image, the main content of all seperate pages begin. Looks like this:

HTML:

Code:

<div id="maincontent">

CSS:

Code:

#maincontent {
	width:960px;
	border-right: 10px solid #561414;
	border-left: 10px solid #561414;
	margin: 0px auto;
	background: #FFFFFF;
	height: 100%;
}

Should go just to the bottom, but it seems to expand the page way below the bottom.

Is that because of the attribute we changed in the Body?

Link: http://www.froso.dk/test/index2.html

Thread: 100% height for div containers?

Thread Tools

Search Thread

100% height for div containers?

Bookmarks

Bookmarks

Posting Permissions