PDA

View Full Version : Div height problem.



Chadwick359
May 1st, 2010, 11:08 PM
Hey there, I'm working on a simple single column site for a friend, I haven't touched web coding in forever, and I've run into a bit of trouble.

One (http://dl.dropbox.com/u/5010164/index.html)
Two (http://dl.dropbox.com/u/5010164/index2.html)

I'm trying to get my content DIV to fill to the bottom of the container, to no avail. #container fills to the bottom of the page correctly (example one, there's a scroll bar because of the border I'm using to keep the div visible right now), but when I tell #content to use
height: 100%; (example two) it fills and extends the container 120 pixels, making a scroll bar. For some reason it's filling 100% of the page height and not its container height. Any help would be appreciated.

Note: The extra 120 is the height of the first several divs I'm using at the top of the container.

Excavator
May 2nd, 2010, 02:42 AM
Hello Chadwick359,
You're very close...
Try making your CSS look like this -
html {height:100%;}
body {
background: url(Img/Bg.png);
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
width: 920px;
padding: 0;
margin: 0 auto;
text-align: left;
background: #fff;
}
#head {
height: 75px;
width: 920px;
padding: 0;
}
#nav {
width: 920px;
background: #c5c5c5;
height: 35px;
padding: 0;
}
#space {
width: 920px;
background: #000;
height: 5px;
padding: 0;
}
#content {
font: 1.5em arial, verdana, sans-serif;
padding: 0 40px;
}

Based on this method - http://nopeople.com/CSS/full-height-layout/index.html

Chadwick359
May 2nd, 2010, 03:26 AM
Thanks for the reply Excavator, but there's one issue with doing it that way. I'm intentionally leaving the blank space above the #nav Div, and if I let #content collapse like that and specify the background color in #container, then I lose that space where the background shows through.

Excavator
May 2nd, 2010, 04:14 AM
But that's how a CSS full height layout works. The #container is the only available full height element. You can see what I mean when you try to force #content to be 90% high... nothing happens.


The background image doesn't line up very well when put in #head -
#head {
background: url(Img/Bg.png);
height: 75px;
width: 920px;
padding: 0;
}

You may want to try a white background image positioned 75px down, repeated x and tall enough to fill the most height you expect #container to take.

Chadwick359
May 2nd, 2010, 07:23 AM
I may have been a bit unclear in my explanation, I think. I just want the background color of the #content div to fill to the bottom of #container. The suggestion of the offset white BG image would wind up causing the same issue, it will overshoot and create a scroll bar where one isn't necessary, which is exactly what I'm trying to eliminate.

Excavator
May 2nd, 2010, 07:56 AM
I may have been a bit unclear in my explanation, I think. I just want the background color of the #content div to fill to the bottom of #container. The suggestion of the offset white BG image would wind up causing the same issue, it will overshoot and create a scroll bar where one isn't necessary, which is exactly what I'm trying to eliminate.

No, your explanation was fine. Maybe mine was less than clear though.
See my two examples here:

one (http://nopeople.com/Chadwick359/one.html)
two (http://nopeople.com/Chadwick359/two.html)

Pay particular attention to the two different background images used.

Chadwick359
May 2nd, 2010, 06:13 PM
Ahh, I see. That works well, thank you for the quick help, you're a lifesaver, Excavator.

Excavator
May 2nd, 2010, 09:00 PM
Ahh, I see. That works well, thank you for the quick help, you're a lifesaver, Excavator.

The .jpg will work in any browser - I'm pretty sure the spacing 75px down will too.

The .png will need a hack to work in IE6. If you decide to use the .png version, google "pngfix" to find it.