...

View Full Version : 100% height div w/ background!



beans_etc
11-04-2008, 01:41 AM
Since I began doing CSS layouts instead of tables last year, it seems like every single site I do I run into the same problem -- getting a div to stretch to 100% height. I find the solution to it, it works; then when I try the exact same solution for the next site I do, it refuses to work properly. It's very frustrating how such a simple concept can be so hard to do...


http://www.pinstripepresentations.com/stephanie/residential.php (http://www.pinstripepresentations.com/stephanie/residential.php)

There are two divs -- left column and right column -- within a page_wrapper div. I need the right column div and it's background to always be 100% height and touch the top and bottom of the window. But right now it only stretches to the window viewable area and doesn't continue when you scroll.

I've included all the parent height commands. I've been fighting with this dang thing for a whole day and I'm not sure what else to try. Please help!

twodayslate
11-04-2008, 01:53 AM
top and bottom and position: relative; are not needed.
to center a layout use margin: 0 auto;
you should really use ids instead of classes for <divs>
float the divs
http://bonrouge.com/2c-hf-fixed.php

Very good for you first css layout. Well done.

beans_etc
11-04-2008, 04:00 AM
Thanks for the reply, though I'm still a little confused.

Remove top, bottom, and relative where? The wrapper div? The right column div?
Where do I put the margin -- that will make it 100% height? The wrapper div is already set to that for a margin.

beans_etc
11-04-2008, 04:05 AM
I tried your suggestions in a few different places and it still isn't working. :c

_Aerospace_Eng_
11-04-2008, 05:07 AM
Its because of your sidebars. They are position:absolute. They need to be floated and they can't have any positioning on them. Remove the heights from them as well. You also have this

html #page_wrapper {
height: 100%;
}

#page_wrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 974px;
margin: 0px auto 0px auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
It should be this

* html #page_wrapper {
height: 100%;
}

#page_wrapper {
position: relative;
min-height: 100%;
width: 974px;
margin: 0 auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
And 0 is 0, no need for units.

beans_etc
11-04-2008, 05:26 AM
Thanks, the floats seem to solve my original problem, but with it comes a whole new problem -- the long scrolling pages look good, but the short pages such as:

http://www.pinstripepresentations.com/stephanie/contact.php

...no longer stretch to fill the page (I'm working in FF3 right now.) >_< Further advice?

beans_etc
11-04-2008, 05:33 AM
Update:

I tried taking out the


height: auto !important;

and just adding a regular height: 100%; which fixed the short pages, but it then brought back my original problem with the long scrolling pages...

When I view the page with Firebug, the page_wrapper is still not stretching to 100% height.

_Aerospace_Eng_
11-04-2008, 05:40 AM
Remove the background from the right column and add this to your page_container CSS

background: url(../images/bg_content.png) top right repeat-y;
You may want to add some bottom padding to your left column. You also need to clear your floats.

http://positioniseverything.net/easyclearing.html

beans_etc
11-04-2008, 05:59 AM
:D It works! Thank you! I'll have to test it tomorrow in IE and Safari but so far so good!

(BTW, I did actually clear the floats -- I use a <br class="clear" /> instead of a div though, it's just what I was originally taught.)

Thanks again!

beans_etc
11-04-2008, 06:07 AM
There's only one slight flaw that I found -- when you shrink down the browser window to something like 800x600 or 1024x768, then go to one of the short pages like Contact and scroll, the background stops. I'm not sure why it works at higher resolutions and not smaller ones... I'm designing this for 1024.

_Aerospace_Eng_
11-04-2008, 06:09 AM
Remove this from #page_wrapper

height: auto !important;
height: 100%;

beans_etc
11-04-2008, 06:13 AM
Doesn't appear to change anything.

_Aerospace_Eng_
11-04-2008, 06:16 AM
Its not needed but I added this after you posted

Remove the position:relative; and top values from your navigation and promo box. Add a top padding to your left column. At a top margin to your promo box or add a bottom margin to your navigation.

beans_etc
11-04-2008, 06:23 AM
You are officially my hero. *Piles you with cookies of thanks*

stanfordrep
11-04-2008, 09:11 PM
Cookies of thanks? That's a new one to me. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum