100% variable page height

[michaellunsford]

Okay, here's the basic idea:

[img]http://www.virtual-showcase.net/phpfreaks/layout.gif[/img]

So far everything works, EXCEPT, making the page 100% minimum height. I had previously floated a 100% high DIV 1px on the left (or right), but the 100% wide DIV's don't play fair in IE. Another challenge with the privious design was making the legal stuff always appear just above the footer.

Another try using position:absolute (cringe) for the bottom sections resulted fine if the page didn't combine to take up more than 100% height. If it needed to stretch past 100%, though, the absolute stuff just stayed "fixed" to that spot on the page, and the content kept going underneath it.

So, the new design (pictured above) seeks to remedy this with a white-space buffer. But, how to make that buffer smart enough to know that it needs to have a height of 100%-117px-10px-10px-$variable-$variable?

confused yet?

[ToonMariner]

if you want the two side divs to be 100% high then you are out of luck. try google for faux columns. If its just the page you want to be !00% high the just have this in your style sheet.

html
{
height: 100%
}

I often use 101% so that Firefox always has the scroll bar other wise you get that annoying litt;le shift left when a page is longer than the view pane.

[michaellunsford]

Page height of 100% isn't the problem. The problem is some pages don't have enough content to push the footer all the way to the bottom.

[weknowtheworld]

Try to use style:height =100%.

[michaellunsford]

Thanks for the suggestion. Doing that makes the DIV height 100% of the total screen height -- which fills the page with whitespace and forces the page to be two or more screens long.

Honestly, I don't think it's possible -- which is disappointing. I could do it with tables :(

[ToonMariner]

Well the only way you could get the footer at the very bottom is absolute positioning - which is to be avoided as still so many use IE6 and that just likes to decide what it thinks it should do with absolutel positioned elements instead of what you want to do.

Dare I suggest that you should use a site design that doesn't care how high teh page is? If it IS an issue the I suggest you give the body text a fixed height and an scroll bar - that way your page will look something liek what you want.

[michaellunsford]

ah, but the challenge of making the complete transition from tables to divs... oh, well.

[anonnerz]

If you are willing, you could send me the code and let me have a crack at it for you. I am a web developer and have a few ideas on how to get this to work (including changing the doc-type).

PM me.

[Zeon]

take a look:
[url=http://alistapart.com/articles/footers]http://alistapart.com/articles/footers[/url]

[michaellunsford]

javascript (shudder). But hey, it works ;D

[Daniel0]

http://www.cssplay.co.uk/layouts/index.html

The "'Fixed' layout version X" should show you how to do it.