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!

Lilybel

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;
}

Pectize

Hummm. Sounds interesting... I will try it right now... Thanks! – Lilybel

Let me know how you go, I only tested it in my head :) – Pectize

The only problem I see is that the header layer must be on a higher z-index so that it covers the layer behind it. That causes the scrollbar of the content layer to disappear behind the header... Do you have any ideas on how to fix this? Thanks again! – Lilybel

Just make the content have a higher z-index than the header, as long as #content doesn't have a background color you should be fine. – Pectize

But what happens then? It seems to me the content will appear over the header if I do that... I need the scroll to start right beneath the header. But it now starts behind it at a point I cannot see. Thank you very much for the help. – Lilybel

I just updated my answer but realised the 120px is being added on top of the 100%, making part of the scrollbar hidden. Back to the drawing board. – Pectize

The problem with this is that the margin-top you are using in content offset is killing the last paragraph... – Lilybel

I mean, fixed margin-top in terms of pixels + height 100%; they blow the last paragraph; One hell of a hack I have tried right now (it works) is to add an empty div as the last element. – Lilybel

The last div with line breaks will expand the content area and allow all the content to be seen. It is kind of dirty... But... – Lilybel

Yeah but notice the position of the scrollbar, it doesn't even get to show the bottom arrow because it's hidden behind the extra 120px that are being added. Hmmmmmmmmmm – Pectize

Also another problem is that the content-offset block is blowing the limits of the #content block. The result is that the scrollbar is cut and you can't see the end of it... I almost believe there is no pure CSS solution for this... – Lilybel

Look at the layout of jsfiddle.net. They use a bit of javascript to calculate the values. What you can do is leave what you have for non-js users, but maybe fix up the layout for ones that do. – Pectize

yep. Many thanks for all the help, man. I am marking as solved. – Lilybel

Thanks for that - eventho it's not really a full answer. It's pretty much bothering me now, I'll come back to it if I can find a prettier solution. Thanks for the accept! – Pectize

thanks, man, if you can find a solution for that, I will be very glad. It seems a very tricky thing to do as I was browsing the web and not getting what I needed. – Lilybel

Answer 2

The answer of Makro is close, but doesn't work well. The content overlaps the header.

To the point, you'd like to use position: fixed; for your header, not for your content. This also makes the wrapper superfluous. Here's a basic kickoff example, you can copy'n'paste'n'run it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3433129</title>
        <style>
            body { 
                margin: 0;
                background: aqua;
            }
            #header {
                position: fixed;
                height: 120px;
                width: 100%;
                background: pink;
            }
            #content {
                padding-top: 120px; /* Should be the same as #header height */
            }
        </style>
    </head>
    <body>
        <div id="header">
            <h1>Header</h1>
        </div>
        <div id="content">
            <p>Start of content.</p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
            <p>End of content.</p>
        </div>
    </body>
</html>

Wee

It does overlap the header - but notice the top margin on the offset? by the way, padding gets ADDED on top of width/height, so your #content will be 100% + 120px. – Pectize

@Marko: The height of 100% shouldn't have been there in first place (would also not have worked since the html/body doesn't have 100% height ;) ). I updated the answer. – Wee

Thanks, but the difference from what I need is that the scrollbar for the #content block in your example is actually the browser scrollbar. I need a scrollbar that runs inside the #content block only, as an overflow auto. – Lilybel

Then go ahead with Marko's solution. It's only hard to get it to work nicely on a solid crossbrowser compatible manner without a bit help of JS. – Wee

Answer 3

No. I think you will have to use javascript to get the window size for this, unless you set the top block to a fixed % size, e.g. make the top block 10% and the bottom 90%.

Czar