Div 100% height problem

div ends when scrolled down

[Bonked]

Hey All,

I'm trying to hide/show a layer that stretches over the entire page.

My attempt: <snip>

You can click the link called 'Edwin' to view the layer. It seems to work fine but when you scroll down you see that the div has ended at the bottom of the browser screen. Does anyone know a possible fix for this?

Thank you, Edwin

PS: the CSS code is at <snip>

[edited by: Robin_reala at 1:44 pm (utc) on Mar. 23, 2007]
[edit reason] Removed URLs (see TOS #13 [webmasterworld.com]) [/edit]

[sgietz]

The 100% refers to the current browser window, not the whole page. You'll need javascript to expand layers to the bottom of the page, or depending on what you're wanting to do, you might be able to achieve the desired result with a creative use of background images.

[Bonked]

And how would I go about doing that?
With document.body.scrollHeight?

I'll have a go at it. I will let you know if I get it to work or not.

Thanks :)

[Xapti]

The 100% refers to the current browser window, not the whole page.

Doesn't it depend on what the object's positioning is?

I don't currently know your objects positioning, whether it's static, absolute, or fixed. Considering you wanted the Div spanned over the entire page (and didn't make a mistake), you'd have used position:absolute. (can you please post just your CSS/HTML code, without your links to site?)

If that's what you want... I would think height:100% would span the entire page, wouldn't it? I know that if you say height:100% on a static element, it will just stay default size (except on IE, where it actually fills the screen for some reason!), and that on a fixed element, it will do only the window size (but since it's positioned fixed, scrolling down won't go past it's end, since it's always fixed)

You're right. Turns out, even with absolute positioning, that it doesn't stretch the page, but just the screen... which I think doesn't make much sense.

[edited by: Xapti at 6:49 pm (utc) on Mar. 24, 2007]

[cmarshall]

1) Welcome to WebmasterWorld!

2) The best way to stretch a <div> is with nested layout. The outer <div> will stretch to accommodate any internal elements. For this reason, a common pattern that many table-less layouts use to get the effect of a table layout is to have a container <div> that has a vertically-repeating background pattern with different "zones." These "zones" correspond to contained elements. The contained elements don't make it all the way down, but you don't know that, because the background image makes it all the way down. This is seen in many WordPress skins.

It works well, but has a few issues. You need to keep rigid control of your content to prevent "jostling" the elements and to prevent it from overflowing.

I don't like using 100% height. I find that different browsers react to it in odd ways. Maybe it's improved these days, but I just got out of the habit of using it.

<hides behind sofa>

However, the absolute certain way to get that effect, and have it render correctly on just about any browser out there, is to use a <table>.

<ducks>