Ian Young wrote: >> Have a look at http://03.infocopa.com/apropos/vision.html . >> >> I've given 100% min-height (height for IE) to html and body. >> (body has the >> off-white background-color.) Unfortunately, on short pages like >> this, if the >> content is shorter than the window, the body won't extend all the >> way to the >> bottom. The problem shows up on Firefix and IE7, but not IE6.
> A few things strike me here. > > Don't need the html section > Put the font-size and height in the body as 100%. > Why put min height in the body? > > Add a height definition in the main-wrapper. After all this is what > you want to be 100% in height, huh? The body will always be 100% - > think about it! > The wrapper can shrink or expand dependent on content . I used the code found in our very own CSS-Discuss Wiki: http://css-discuss.incutio.com/?page=HundredPercentHeight . It's quite educational. In Firefox, this is the only combination that seems to work: html, body {height: 100%} #wrapper-main {min-height: 100%} /* height: 100% works also */ OK, with your suggestions, I have: html { font-size : 100%; /* Unrelated to this problem */ } body { width : 80%; display : table; margin : 0 auto; font-size: 0.8125em; /* Unrelated to this problem */ line-height : 133%; /* Unrelated to this problem */ } #wrapper-main { height: 100%; position: relative; /* Unrelated to this problem */ padding : 30px; /* Unrelated to this problem */ } The problem remains: #wrapper-main doesn't reach the bottom of the window. In a sample window, Firefox's DOM Inspector's Computed Styles shows: html = 388px tall body = 388px tall wrapper-main = 327.2 px tall, even with its height: 100%. ("CSS Style Rules" confirms that "height: 100%" is active.) Any further suggestions? > No need to have wrapper-main positioned relative. Actually, yes: I was gearing up for the next bit of polish -- always having the footer at the bottom of the page, even if content was shorter than the window. (Again, CSS-Discuss Wiki - http://www.themaninblue.com/writing/perspective/2005/08/29/ is the first suggestion in the "HundredPercentHeight" page) (And yes, I know I would've had to move the #footer div outside #wrapper-main to do so. Note the future tense.) > I would tend to write something like: > #wrapper-main{ > width: > min-height:550px; > height:auto !important; > margin:0 auto; > } > which will work for IE6 and the better browsers. I'm hoping for a pixel-free solution, to work at all browser sizes. 550px is still too little for #wrapper-main to cover the entire height of the window on my screen. > This is nice site - but need to get the basics right. Thanks for the compliment. Charles ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
