Note that there are some explanatory texts on larger screens.

plurals
  1. POFulfilling strange requirements with CSS (kind of simulating frames)
    text
    copied!<p>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.</p> <p>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.</p> <p><a href="http://www.4freeimagehost.com/uploads/820aee2ded8b.png" rel="nofollow noreferrer">layout of the website http://www.4freeimagehost.com/uploads/820aee2ded8b.png</a></p> <p>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.</p> <p>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: </p> <ul> <li><p>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.</p></li> <li><p>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.</p></li> </ul> <p>Do you know a way how all this can be achieved?</p> <p>Yours Bernhard</p> <p>edit 1: Oh, and I forgot: The site should be passable viewable in 1024x768. edit 2: Another thing: The header has got a fixed height and the navigation a fixed width. The height of the navigation as well as the height and width of the content should fill the entire screen.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload