html - 为什么我的垂直滚动条不能根据标题 div 的高度正确显示

Question

如果你看看这个 fiddle :http://jsfiddle.net/bastien/PybrF/1/

#header {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 100%;
    background-color: yellow;
}

#content {       
    top: 51px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: auto;
    background-color: orange;
}

如果您调整窗口大小，则垂直滚动条会在内容 div 中可见。但是只有当我在调整窗口大小时超过标题的像素高度时，它才会可见(所以对我来说似乎......)。

如何正确获取垂直滚动条？

更新

我想要一个保持固定的标题。我想要一个有内部滚动条的内容。

是这样的:http://jsfiddle.net/bastien/PybrF/7/

但是垂直滚动条应该从内容 div 开始，而不是从标题/正文开始。

Answer 1

在你的 CSS 中试试这个:

* { margin: 0; padding: 0 }
#header, #content { width: 100%; position: absolute; }

#header {
    height: 50px;
    background-color: yellow;
}

#content {
    top: 50px;
    height: 70%;
    overflow-y: auto;
    background-color: orange;
}

将产生这个:

至于内容的高度使用所有剩余的空间，我将连接到调整大小事件的js函数将内容的高度设置为页面高度减去页面高度 header 。老实说，我不知道其他解决方案。