Pure CSS emulation of a frameset

Question

I have been searching for more than 1 hour with no success. Is there a pure CSS way of emulating a frameset? I mean, really emulating it. I have found some interesting stuff where you will have fixed top and bottom blocks, but the scroll bar for the content is the regular browser body scrollbar. What I need is a scrollbar only for the content block, as a frameset would do.

I can make it work by assigning overflow: auto to my content area div and setting a fixed height. But the problem is I don't know the client browser window size without using javascript. And I don't want to use javascript for this. I also canot use percents for the heights as my top block has a fixed height. The lower block is the one that should expand or shrink depending on the browser window height. Any help appreciated. Thank you!

Answer 1

How about something like this?

HTML

<div id="header">
    <img src="logo.gif" alt="logo" />
    <h1 class="tagline">Oh em gee</h1>
</div>
<div id="content">
    <div id="content-offset">
        <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p>
    </div>
</div>

CSS

body, html {
    margin: 0; padding: 0;
    height: 100%;
}
#header {
   height: 120px;
   position: fixed;
   top: 0;
   background: red;
   width: 100%;
}

#content {
    height: 100%;
    position: absolute;
    top: 0;
}
#content-offset {
    margin-top: 120px;
    background: aqua;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
}