Div 100% height

Inazuma · 4 Jan 2010 at 00:40

Hi, I am currently designing a web site and have a bit of a problem.
http://anthonycampbell.co.uk.s22581.gridserver.com/
Just to quickly explain the 'layers' - The body has a small background image that tiles the whole screen.
On top of that, is a div "pageContainer" which has a wide background image that is repeat-y (it's what gives the light gradient).

We want this pagecontainer div to extend to the bottom of the browser, rather than cutting off at the end of the content.

Solutions?

Tripnologist · 4 Jan 2010 at 09:50

If you're setting a relative height, the parent needs to have a height declared as well. If you're setting a relative height on the parent as well, you'll need to declare the relative height for its parent and its parent up to 'body' and 'html'.

In other words, set height: 100% for pageContainer, body and html. You'll find that you'll run into other problems with this though in that 100% height is still only as tall as the browser window, not the content.

I would just use the one background image myself. You can make it wider and reduce its height to save space. The file size shouldn't be too large anyway.

Bonus tip: You've used text-indent on your menu. If you apply overflow: hidden to the 'a' element, the outline on click will be contained correctly rather than going all the way across the page to contain the indented text.

gord · 4 Jan 2010 at 09:50

The height value of 100% for a child element will default to auto if it doesnt get given a parent value. Auto height just fits the content.

I think you can set your body to height 100% and that will pass down the correct value as at the moment your body doesnt even fill the browser window.

See how that goes.

xiphrex · 4 Jan 2010 at 14:05

What you can do is -

On #pageContainer add:

position:absolute;
top:0;
bottom:0;

Inazuma · 9 Jan 2010 at 21:15

Cheers for all the replies

Inazuma · 10 Jan 2010 at 14:39

Those solutions don't really work. They only extend the background to the height of the browser, and if content extends beyond the height of the browser, then the background cuts off.

Ciphon · 10 Jan 2010 at 14:57

Tripnologist said:
You'll find that you'll run into other problems with this though in that 100% height is still only as tall as the browser window, not the content.

Trip did mention that would happen ^^

Would putting a minimum height of 100% on the div work? Then let it expand as needed beyond that with height auto?

I have no idea if that will work or not, I'm a complete CSS novice.

Tripnologist · 10 Jan 2010 at 16:48

The above should work in decent browsers. Not sure what would happen in IE6 though as it doesn't support min-height.

Inazuma · 10 Jan 2010 at 21:21

Trying it with Stylish. Doesn't seem to work

Background cuts off at the end of content.

Tripnologist · 10 Jan 2010 at 22:33

Code:

html, body { height: 100%;}
#pageContainer { min-height: 100%;}