Pure CSS emulation of a frameset_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-10 12:05 出处：网络

I have been searching for more than 1 hour with no success. Is there a pure CSS way of emulating a framese开发者_StackOverflow中文版t? 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!

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

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>

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%.