框架集的纯CSS模拟

Question

我一直在寻找超过1小时没有成功.是否有一种模仿框架集的纯CSS方式？我的意思是,真的模仿它.我发现了一些有趣的东西,你将有固定的顶部和底部块,但内容的滚动条是常规的浏览器主体滚动条.我需要的只是内容块的滚动条,就像框架集一样.

我可以通过将overflow:auto指定给我的内容区域div并设置固定高度来使其工作.但问题是我不知道客户端浏览器窗口大小而不使用javascript.而且我不想为此使用javascript.我也使用百分比作为高度,因为我的顶部块具有固定的高度.下部块是应根据浏览器窗口高度扩展或缩小的块.任何帮助赞赏.谢谢!

Answer 1

像这样的事情怎么样？

超文本标记语言

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