Posted by Ben C on 09/28/07 07:30

On 2007-09-23, julian.bash <misteriousj@googlemail.com> wrote:
> On Sep 23, 11:38 pm, Bergamot <berga...@visi.com> wrote:
>> julian.bash wrote:
>>
>> > #middle { height:100%; margin-top:100px; margin-bottom:100px; }
>>
>> Wouldn't that would make the total height 100% plus 200px?
>>
>> --
>> Berg
>
> You're right, this works for me:
>
> body { margin:0; }
> div { position:absolute; width:100%; }
> #top { height:100px; }
> #middle { top:100px; bottom:100px; }
> #middle { height:expression(document.body.clientHeight-100); }

That "expression" thing is completely non-standard.

> #bottom { height:100px; bottom:0; }
> #bottom { margin-top:expression(document.body.clientHeight-100); }

And that one isn't necessary anyway.

Just make middle position absolute as well and give it top: 100px,
bottom: 100px and height: auto.

Make body (or some wrapper div) position: relative, and don't bother
with width:100%. Then you will get the width you want regardless of
margin, padding and borders. Tip: width:100% is rarely necessary, if you
find yourself writing it ask why.

But latching things onto the bottom of the viewport like this doesn't
work well when the viewport is resized. What's the browser supposed to
do? Annoyingly reflow the whole page or leave the "footer" half-way up
the page at its new size?

Much better to let the bottom of the page just be at the bottom. Locate
things only at the top and left (or top and right if it's a rtl page)
and let the right and bottom do what they want.

[Back to original message]