homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Alternate box height definitions?

 6:47 pm on Mar 8, 2003 (gmt 0)

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?



 6:56 pm on Mar 8, 2003 (gmt 0)

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)


 8:57 am on Mar 9, 2003 (gmt 0)

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?


 7:26 pm on Mar 10, 2003 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved