Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
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?
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)
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.