Welcome to WebmasterWorld Guest from 107.22.56.104

Forum Moderators: not2easy

Message Too Old, No Replies

Alternate box height definitions?

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

New User

10+ Year Member

joined:Mar 8, 2003
posts:2
votes: 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)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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)

New User

10+ Year Member

joined:Mar 8, 2003
posts:2
votes: 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)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members