固定标题部分，底部可滚动

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

工作小提琴：http://jsfiddle.net/TBnqw/2304/

最严重的部分是考虑标题的可变高度。

如果您不想使用javascript，可以尝试以下方式：

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