Alternate box height definitions?

[Arbitrage]

I'm sort of new to CSS, so I apologize if this is a ludicrous question, but here goes.

I'm trying to create a layout in CSS that will require no scrolling of the browser window so that the page can be reasonably viewed from all resolutions. My problem comes with a box that's below a header; I want it to extend to a fixed distance above the bottom of the browser window. I'd just pad the bottom, but I don't know of a way to get the box to extend down to the padding without having content to extend it, and this needs to be a content-independent setting. So is there an easy way to fix the problem, or would it be wiser to aim for a different method of display?

[DrDoc]

Welcome to Webmaster World!

Well, you can always use height:100%

It works very well cross-browser (except in older browsers that don't always support it ... such as NN4.) Opera 6 extends the box to the inner height -2 pixels. But that's not worse than we can live with it. Just remember not to add padding or a margin to the 100% div. Put another div inside it, and add padding to that div instead (to avoid scrollbars in browsers that would otherwise make the div 100%+padding)

[Arbitrage]

Thanks for the welcome.

I tried setting the height to 100%, but then any elements inside of a 100% div that extend past the bottom of the screen just push the whole thing below the window. Is there any way to avoid that?

[DrDoc]

There is, in all common browsers except Opera.

Just add overflow:auto to your style sheet. That will cause the height to remain 100%, but there will be a scrollbar on the div.

However, you can also use overflow:hidden, which will simply cause the extended content to be hidden and inaccessible.