Fulfilling strange requirements with CSS (kind of simulating frames)

Posted by Bernhard V on Stack Overflow See other posts from Stack Overflow or by Bernhard V
Published on 2010-05-04T11:09:03Z Indexed on 2010/05/04 11:18 UTC
Read the original article Hit count: 287

Filed under:
|
|
|
|

Hi!

I'm struggling to find a way to code a site according to our strange requirements. The site should be displayed correctly in all browsers from IE6 to Opera.

The website is structured in three parts. It contains a header at the top, a navigation on the left an the rest of the screen should be filled with the content section. The following picture should help you better understand my description.

layout of the website

Here comes the kicker: Each of the three sections should be scrollable separately and no browser scrollbar should appear. The page should be displayed similar as if it would use frames. Of course, on a big enough screen, no scroll bars should appear.

It doesn't matter which way is used to display the site, although frames aren't an option an divs would be preferred. There are two conditions:

  • The site should always fill the whole browser screen. The header and the content section should reach to the right border of the page, and the navigation as well as the content to the bottom.

  • As soon as the site is scaled down -- whether due to resizing the browser window or due to a smaller resolution -- a scrollbar for every single section should appear, but no "browser scrollbar" for the whole page. The header should always retain it's height and the navigation always it's width.

Do you know a way how all this can be achieved?

Yours Bernhard

© Stack Overflow or respective owner

Related posts about html

Related posts about css