Pure CSS emulation of a frameset
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%.
加载中,请稍侯......
精彩评论