Fulfilling strange requirements with CSS (kind of simulating frames)

Question

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.

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

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.

Answer 1

UPDATED:

i have found this article

• http://www.alistapart.com/articles/conflictingabsolutepositions/

just CSS & HTML i think is what you are looking for!

FINAL DEMO: http://jsbin.com/icemo3/24

In responce to your last comment, i have worked out this solution that require also a bit of jquery (javascript) please see the demo and use the demo code!

$(window).load(function() {
getWindowProportion()
});

$(window).resize(function() {
getWindowProportion()
});

function getWindowProportion() {
 $('#wrapper').attr('style', 'width:' + $(window).width() + 'px');
    $('#header').attr('style', 'height:200px;width:' + $(window).width() + 'px');
    $('#navigation').attr('style', 'height:' + ($(window).height() - 200) + 'px;top:200px;width:300px');
    $('#content').attr('style', 'width:' + ($(window).width() - 300) + 'px;top:200px;height:' + ($(window).height() - 200) + 'px;left:' + ($('#navigation').width()) + 'px');
};

---

CSS DEMO 2: http://jsbin.com/icemo3/2

CSS DEMO 3: http://jsbin.com/icemo3/3

* { margin:0; padding:0 }
html, body { margin:0; padding:0;  position:relative; overflow:auto; width:100%;  height:100%; }
#content { float:left; width:  80%; background: cyan; height:80%;  top:20%; left:20% }
#navigation { float:left; width:  20%; background: green; height:80%;  top:20% }
#header {  width:  100%; background: red; height:20%; }
.scrollme { margin:0; padding:0; overflow: auto;  position:absolute; }
p { margin:10px }

<div id="header" class="scrollme"><p>some text here</p></div>
<div id="navigation" class="scrollme"><p>some text here</p></div>
<div id="content" class="scrollme"><p>some text here</p></div>

NOTE:

tested on: 
IE6+
Chrome
Firefox
Opera

1. each section have its own scroll-bar!
2. each section have 100% width and height!
3. no browser window scroll-bar appear!
4. each section always retain its proportion
5. work on all screen resolution

Answer 2

Nice question. For this one, you have to find the browser screen resolution size of x and y (maybe using javascript). with this size, assign the width and height in the div section.

In div, you can use like this way

<div id="nameID" style="position: relative; overflow-y: auto; overflow-x: auto;"></div>

Try this method. I think you can get a correct solution.

Answer 3

So, I now found a way to make this work without the header.

The navigation section uses the following CSS:

float: left;
height: 100%
overflow: auto;
width:185px;

The content section uses this:

height: 400px;
overflow: auto;

As well as

html, body{
    height: 100%
}

The only problem is that when I insert the header, the site stretches until outside of the browser window. This is due to the use of height: 100%. Do you know how I can make the page still fit the into the browser screen?

edit 1: The following JavaScript would do the trick, at least in Firefox:

window.onresize = resize;

function resize(){
    heightWithoutHeader = (window.innerHeight - 85) + "px"; 
    document.getElementById("content").style.height = heightWithoutHeader;
    document.getElementById("navigation").style.height = heightWithoutHeader;
}

But maybe there's a more elegant CSS solution ...

Answer 4

Frames still exist for a reason. There's a time and a place. This is probably it.

But here's a way to do it with CSS instead of frames, anyway:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Not Frames</title>
        <style type="text/css" media="screen">
            .fake-content {
                margin: 20px;
                background-color: #000;
                height: 1500px;
                width: 1500px;
            }

            /* Get rid of the original scrollbars */
            html, body
            {
                margin: 0;
                padding: 0;

                width: 100%;
                height: 100%;

                overflow: hidden;
            }

            /* The frames */
            .frame
            {
                position: absolute;
                overflow: scroll;
            }

            /* The sections */
            #header
            {
                top: 0;
                height: 250px;
                width: 100%;

                background-color: #F00;
            }

            #sidebar
            {
                top: 250px;
                bottom: 0;
                left: 0;
                width: 250px;

                background-color: #0F0;
            }

            #content
            {
                top: 250px;
                bottom: 0;
                left: 250px;
                right: 0;

                background-color: #00F;
            }
        </style>
    </head>
    <body>
        <div id="header" class="frame">
            <div class="fake-content">Content</div>
        </div>
        <div id="sidebar" class="frame">
            <div class="fake-content">Content</div>
        </div>
        <div id="content" class="frame">
            <div class="fake-content">Content</div>
        </div>
    </body>
</html>