Full Height DIV Mystery

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!

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.

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?

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.

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

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.

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.

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.

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!