Full Height DIV Mystery

[Terry]

OK folks, I know this has seemingly been discussed to death but
honestly, I could not find posts related to the specific problem I'm
submitting here. Feel free to flame me, as long as you provide a link
;)

The scenario is simple: An XHTML 1.0 page in Strict Mode. A single DIV
for the content. I want this DIV to occupy the full height of the
viewport.

A somewhat satisfactory prototype is here:
http://novodom.net/test.html

This behaves as I expected, in Firefox and IE. There's a mysterious bit
of vertical scrolling that I can live with.

Problems arise here:
http://novodom.net/test2.html

This is _exactly_ the same code, but with much more content. IE behaves
as I expected but Firefox gets weird on me: the background-color of the
DIV seems to stop at the viewable area's edge! So when I scroll down,
the content is presented according to all CSS rules of the DIV
(padding, etc), except background-color! (Please view the example above
for a better understanding).
Any explanation, solutions or tips will be greatly appreciated!

[musicinmyhead]

In your #myDiv statement in your CSS, remove the height: 100%; and it
should stretch accordingly. When setting the height like that, Firefox
interprets that as 100% of the browser window, not 100% of the content.
Removing the height attribute should fix the problem.

[Terry]

Original :: musicinmyhead :: 2004-12-09 20:54

In your #myDiv statement in your CSS, remove the height: 100%; and it
should stretch accordingly. When setting the height like that, Firefox
interprets that as 100% of the browser window, not 100% of the content.
Removing the height attribute should fix the problem.

Sorry but this solution doest not work for the first scenario: the div
adjusts its length to the content, so it's about an inch tall and
doesn't stretch to the bottom of the page.

I've also tried using 'min-height'; that worked great in Mozilla, did
not work in IE.

Any other ideas?

[musicinmyhead]

Ah ok, yeah I read your question wrong, I was thinking your problem was
just with it not scrolling all the way, when it's just the old "won't
stretch with less content" problem. In which case I can never remember
how to fix that, so I usually just don't bother.

Good luck though.

[Chris Leipold]

Hi,

Terry wrote:

Original :: musicinmyhead :: 2004-12-09 20:54

In your #myDiv statement in your CSS, remove the height: 100%; and it
should stretch accordingly. When setting the height like that, Firefox
interprets that as 100% of the browser window, not 100% of the content.
Removing the height attribute should fix the problem.

Sorry but this solution doest not work for the first scenario: the div
adjusts its length to the content, so it's about an inch tall and
doesn't stretch to the bottom of the page.

I've also tried using 'min-height'; that worked great in Mozilla, did
not work in IE.

Any other ideas?

Two ideas: Either use Dean Edwards' IE7 patch to let IE understand
min-height or try to place an empty div with 100% height in #myDiv.
But I fear the latter won't do it (since it has 100% of #myDiv as
height...).

Chris

[Terry]

Hi,

Chris Leipold wrote:

Hi,

Terry wrote:

Original :: musicinmyhead :: 2004-12-09 20:54

In your #myDiv statement in your CSS, remove the height: 100%; and it should stretch accordingly. When setting the height like that, Firefox interprets that as 100% of the browser window, not 100% of the content. Removing the height attribute should fix the problem.

Sorry but this solution doest not work for the first scenario: the div adjusts its length to the content, so it's about an inch tall and
doesn't stretch to the bottom of the page.

I've also tried using 'min-height'; that worked great in Mozilla, did not work in IE.

Any other ideas?

Two ideas: Either use Dean Edwards' IE7 patch to let IE understand
min-height or try to place an empty div with 100% height in #myDiv.
But I fear the latter won't do it (since it has 100% of #myDiv as
height...).

Chris

I've taken another approach that shows some promise but I STILL need
help, please.

I need a full-width header on top of the page and *then* a narrower
content area.

I've decided to play with the margins of the BODY element and you can
see the result i'm hoping for here, if you use Mozilla:
http://novodom.net/test3.html

That's exactly what I'm after -- the only thing left to do is to make
it work in IE. IE does show everytning in the right place, but the
width of the header is not what I expected.

Can someone explain or suggest tips for dealing with the header width
sot that it spreads across the whole page?
Thanks again.

[musicinmyhead]

> I've taken another approach that shows some promise but I STILL need

help, please.

I need a full-width header on top of the page and *then* a narrower
content area.

I've decided to play with the margins of the BODY element and you can
see the result i'm hoping for here, if you use Mozilla:
http://novodom.net/test3.html

That's exactly what I'm after -- the only thing left to do is to make
it work in IE. IE does show everytning in the right place, but the
width of the header is not what I expected.

Can someone explain or suggest tips for dealing with the header width
sot that it spreads across the whole page?
Thanks again.

Ok there are a few things you can change to make this work. First off
wrap all of your content in a div and give it an ID, for instance #all.
Then make sure the header is at the top outside of the #all div so that
the margins for #all don't affect the header. Then in your css, change
the body to #all and change the html to "HTML, BODY" instead.

You can see an example here of what I changed:
http://hfd.mine.nu/full_width_header.html

And just another note, in your #myDiv css you gave it a z-index yet it
was positioned relatively. When you do that the browser will ignore the
z-index, because it only works with absolutely positioned elements.

[Terry]

Hi again!

musicinmyhead wrote:

I've taken another approach that shows some promise but I STILL need help, please.

I need a full-width header on top of the page and *then* a narrower
content area.

I've decided to play with the margins of the BODY element and you can see the result i'm hoping for here, if you use Mozilla:
http://novodom.net/test3.html

That's exactly what I'm after -- the only thing left to do is to make it work in IE. IE does show everytning in the right place, but the
width of the header is not what I expected.

Can someone explain or suggest tips for dealing with the header width sot that it spreads across the whole page?
Thanks again.
Ok there are a few things you can change to make this work. First off
wrap all of your content in a div and give it an ID, for instance

#all. Then make sure the header is at the top outside of the #all div so that the margins for #all don't affect the header. Then in your css, change the body to #all and change the html to "HTML, BODY" instead.

You can see an example here of what I changed:
http://hfd.mine.nu/full_width_header.html

And just another note, in your #myDiv css you gave it a z-index yet it was positioned relatively. When you do that the browser will ignore the z-index, because it only works with absolutely positioned elements.

Very nice! When I tried it with lots of text, the #all DIV did not keep
up with the scrolling (same symptom as my original post).

So I applied Tantek's hack and voilà!
http://novodom.net/solution_A.htm

Now, the look is the same in both browsers (with IE displaying a
vertical scrollbar for some reason?!) and this will enable me to go
forward with this design I wanted!

Thanks to all who contributed. I hope to repay the favor if I ever get
the chance!

[Terry]

Hi,

Original :: Chris Leipold :: 2004-12-10 04:45

Hi,

Terry wrote:

Original :: musicinmyhead :: 2004-12-09 20:54

In your #myDiv statement in your CSS, remove the height: 100%; and it
should stretch accordingly. When setting the height like that, Firefox
interprets that as 100% of the browser window, not 100% of the content.
Removing the height attribute should fix the problem.

Sorry but this solution doest not work for the first scenario: the div
adjusts its length to the content, so it's about an inch tall and
doesn't stretch to the bottom of the page.

I've also tried using 'min-height'; that worked great in Mozilla, did
not work in IE.

Any other ideas?

Two ideas: Either use Dean Edwards' IE7 patch to let IE understand
min-height or try to place an empty div with 100% height in #myDiv.
But I fear the latter won't do it (since it has 100% of #myDiv as
height...).

Chris

I've taken another approach that shows some promise but I STILL need
help, please.
I need a full-width header on top of the page and *then* a narrower
content area.
I've decided to play with the margins of the BODY element and you can
see the result i'm hoping for here, if you use Mozilla:
http://novodom.net/test3.html

That's exactly what I'm after -- the only thing left to do is to make it
work in IE. IE does show everytning in the right place, but the width of
the header is not what I expected.

Can someone explain or suggest tips for dealing with the header width so
that it spreads across the whole page?
Thanks again.