moonbiter - 4:24 pm on Aug 20, 2002 (gmt 0)

Alas, you can't currently do what you want.

height: 100%; padding-bottom: 40px;

When specified for the body element, you are essentially saying with the above rule is:

"Make the content height of the body element 100% of it's containing block then add 40 pixels of padding on the bottom."

The body element is contained by the root element of the document, in this case the html element. The html element, in turn, is contained by the initial containing block [w3.org]. It is left up to the browser to define how the initial containing block is displayed.

This is an important point. In MSIE 6 and Mozilla 1, the default ('auto') height of the initial containing block is the height of the browser's viewport or the height required by the document's contents, whichever is greater. In Opera, it is simply the height required by the document's contents.

IMHO, the former browsers have the better model, because it theoretically allows you to do what you want like this:

html {
padding-bottom: 10px;
}
body {
height: 100%;
}

However, this only seems to work in MSIE 6.

Mozilla ignores the height declaration on the body element when there is no height specified on the html element (which I think is a bug).

Opera makes the body element 100% of the viewport, and then adds 10px to the height.

So, unfortunately, I don't think there is a good answer for this.