Log in

View Full Version : 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:


#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:

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

CSS for Div Container:

#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:

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
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
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:

<div id="maincontent">

CSS:

#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