html - 带有可滚动底部的固定标题部分

Question

我正在设计一种布局，我的客户希望标题部分固定，页面内容为可用高度的 100% 并且在溢出时可滚动(因此页面本身永远不会滚动)。

我正在解决的问题是标题部分的内容在每个页面上都是不同的，并且在用户生成的标题内容变得非常长并且需要换行的情况下需要有一个灵活的高度，所以我可以'真的没有设置固定的高度。这是我目前拥有的(标题上有高度)

CSS:

.header {
    background-color: #ffff00;
    border: 1px solid black;
    position: fixed;
    height: 100px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}

.content {
    background-color: #cccccc;
    border: 1px solid black;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    height: 100%;
}

http://jsfiddle.net/TBnqw/2302/

这是一个棘手的布局 - 这甚至可能吗？我确信这可以用 Javascript 来完成，但如果可能的话，我真的很想用 CSS 来完成，因为该应用程序将非常大，而且我想要一些易于维护的东西。

预先感谢您的帮助!

Answer 1

工作 fiddle :http://jsfiddle.net/TBnqw/2304/

最困难的部分是考虑标题的可变高度。

如果你不想使用 javascript 你可以尝试这样的事情:

渲染您的 header 内容两次。一次在位置固定的元素中，第二次作为正常文档流的一部分的元素。通过在正常文档流中第二次呈现页眉，您的 bottom section 将被页眉的高度有效地向下推。您可以像原来一样将另一个标题固定到屏幕顶部。