Posted by Ben C on 01/01/08 21:30

On 2008-01-01, Bazley <jmp6789@hotmail.com> wrote:
> I have added margin-bottom: 30px; to the 'main' div (all code below),
> in an attempt to leave 30 px permanently at the bottom of the page.
> But when the content of the main div extends beyond the bottom of the
> screen and a scroll bar appears, it stops scrolling after the border
> of main and ignores the margin. What's the problem? Thanks!
[...]
> body {
> height: 100%;

This is the first part of the problem. Since body is height: 100%, it's
only the height of the html element, which is the height of the viewport
(you also set height: 100% on that).

#main is much higher than the viewport, so it overflows the body.
There's therefore not going to be a gap of 30px between the bottom of
#main and body.

The browser just allows you to scroll to the bottom of #main and no
further. Maybe some browsers let you scroll to the bottom of its margin,
but they don't have to.

So first remove height: 100%. Now you will find it still doesn't work
because #main's bottom margin collapses against the bottom margin of
body. You want that margin between the bottom of #main and the bottom of
body.

So give body 1px of bottom padding and that will prevent its bottom
margin collapsing against its child. You can change #main's margin to
29px if you're bothered by the 1px.

Or just put 30px of padding-bottom on body and don't use a bottom margin
on #main at all.

[Back to original message]