Sent by Wildranger222222 on 9 October 2004 20:08
>Can someone point me to / suggest a way to set a minimum page height. I am
working on a new CSS layout of my site and had added a "height: 500px" to
the #content div, but all browsers (Netscape, FireFox, IE) on the wintel
platform pushed the content beyond the footer. I had tried to set the
#pagecell height to 640px, but it blows the footer out.
>My goal is that when I have a small page such as
http://www.otima.ca/About/resumeInt.html that I can increase the page height
to make the page look a little more balanced.
>..what to do?
>thank you,
>Ian
--------------------------------
"The Mystery of 'Height' in CSS"
Ian, yes, you can achieve that effect. I struggled with this problem a few
months back. The solution is not trivial. No one clearly outlined a clear
cross-browser solution for me in any online resource I found, including css-d,
but I finally have a working template of this effect in css here that works in
all 5+ version browsers:
_http://www.stormdetector.com/layout1.html_
(http://www.stormdetector.com/layout1.html)
_http://www.stormdetector.com/layout2.html_
(http://www.stormdetector.com/layout2.html)
Height is a real logic "bug" and HUGE MESS as far as Im concerned, as
regards the w3c "standard". The problem with the so-called w3c "standards"
regarding height is its written so that 100% means the actual height of the viewport,
and its not flexible, or fully inherited, or even the default value for the
body element in most browsers, like you would expect. Any content that
extends beyond viewport height in any container with 100% in standardized browsers
in general breaks through and overflows. (Not like tables, which expand to
100% and then some if your content extends beyond viewport height). Nasty stuff!
To address that situation they came up with "min-height:100%", so now you
can have your content collapse to fit the container using height:auto (default)
but apply min-height and stretch beyond the viewport. Sounds good till you
see what happens in IE 5-6 using height:auto or the default. Its not supported
in IE, which is 75-90% of market share. This gets worse when you realize that
some browsers set viewport height in the body element, and others the html
element, which in turn derive that from the viewport. Mozilla, Opera, and IE
all do that differently (check this out:
_http://www.quirksmode.org/viewport/experiments.html_
(http://www.quirksmode.org/viewport/experiments.html) ). And
as well, its interpretation is two-fold in IE depending on whether you are
in "quirksmode" or standard mode. Is your brain hurting like mine?! Solution
Ive found to achieve that effect for all agents and have that full height thats
also flexible is the following:
---first make sure your body is truly expanding to 100% height...with agents
today, you just dont know
html,html body {height:100%;}
---add a container to hold that 100% height, so all page elements can expand
inside it. you can also control background colors and image tiling for
various effects. fixes bugs in all browsers for height
div.container {height:100%;min-height: 100%;}
---Now add your layout, headers, footers, whatever, using whatever column
layout you like, inside a new container inside the outer one. The key here is to
give all such containers in IE 100% height again, and all others
height:auto, otherwise, Mozilla will again break out of that layout again...
(apply to IE)
div.newcontainer {height: 100%;}
(apply to all but IE)
html>body div.newcontainer {height: auto;min-height: 100%;}
*the second declaration will eventually apply to all agents and is the
correct way to apply this trick, but IE still performs better 100% for now. Make
sure you also have a goood xhtml doctype in IE for this top work as expected!
Finally, the last trick is to make sure your new container doenst break
through the 100% height, as it will want to do if the content extends beyond the
veiwport. To fix this just add an empty "div" with clear:both, height:0; after
your new inner container. I call this a "stub". You might have to make
that little div's height 1% or some value for IE, but what that does is it stops
the expanding 100% height inner and sends the browser a final height value
and forces the outer container to recaculate its height to accomodate, so it
then stretches all outer divs to fit and you will have that expanding height
feature working in all agents as you seek.
Some people have come forward saying that adding that extra div is not good
code, so you can add this to your newcontainer class instead and do the same
thing, though I have yet seen consistent support for the ":after" psuedo-class
in all agents. This will apply consistently only in Netscape-Mozilla:
..clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Adding this "stub" was the deal-breaker for me. I tried all kinds of tricks
and this is the only one I found that worked cross-browser and consistently in
all kinds of design layouts. Maybe readers have some simpler or better ones,
but again, it was seeing this work in most agents I was after.Hope that
helps! Good luck!
Mitchell - USA
_www.stormdetector.com_ (http://www.stormdetector.com)
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
