框架集的纯 CSS 模拟答案

【问题标题】：Pure CSS emulation of a frameset框架集的纯 CSS 模拟
【发布时间】：2010-08-08 14:03:13
【问题描述】：

我已经搜索了1个多小时没有成功。是否有模拟框架集的纯 CSS 方式？我的意思是，真的模仿它。我发现了一些有趣的东西，您可以在其中固定顶部和底部块，但内容的滚动条是常规的浏览器主体滚动条。我需要的是一个仅用于内容块的滚动条，就像框架集一样。

我可以通过将 overflow: auto 分配给我的内容区域 div 并设置固定高度来使其工作。但问题是如果不使用 javascript，我不知道客户端浏览器窗口的大小。而且我不想为此使用javascript。我也不能使用百分比作为高度，因为我的顶块有一个固定的高度。较低的块是应该根据浏览器窗口高度扩展或收缩的块。任何帮助表示赞赏。谢谢！

【问题讨论】：

标签： html css dom xhtml frameset

【解决方案1】：

这样的事情怎么样？

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

【讨论】：

嗯。听起来很有趣...我现在就试试...谢谢！
告诉我你的进展，我只是在脑海中测试过：)
我看到的唯一问题是标题层必须位于更高的 z-index 上，以便它覆盖它后面的层。这会导致内容层的滚动条消失在标题后面...您对如何解决此问题有任何想法吗？再次感谢！
只要让内容的z-index比标题高，只要#content没有背景色就可以了。
但是接下来会发生什么？在我看来，如果我这样做，内容将出现在标题上方......我需要滚动从标题下方开始。但它现在从它后面的一个我看不到的地方开始。非常感谢您的帮助。

【解决方案2】：

Makro 的答案很接近，但效果不佳。内容与标题重叠。

重要的是，您希望将position: fixed; 用作您的标题，而不是您的内容。这也使得包装器变得多余。这是一个基本的启动示例，您可以复制'n'粘贴'n'运行它。

<!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>

【讨论】：

它确实与标题重叠 - 但注意到偏移量的上边距了吗？顺便说一句，在宽度/高度之上添加了填充，因此您的#content 将是 100% + 120px。
@Marko：100% 的高度本来就不应该存在（因为 html/body 没有 100% 的高度，所以也不会起作用；））。我更新了答案。
谢谢，但与我需要的不同之处在于，您示例中#content 块的滚动条实际上是浏览器滚动条。我需要一个仅在#content 块内运行的滚动条，作为溢出自动。
然后继续使用 Marko 的解决方案。如果没有一点 JS 的帮助，很难让它以可靠的跨浏览器兼容方式很好地工作。

【解决方案3】：

没有。我认为您将不得不使用 javascript 来获取窗口大小，除非您将顶部块设置为固定的 % 大小，例如使顶部块 10% 和底部块 90%。

【讨论】：