为什么我的垂直滚动条不能通过标题div的高度正确显示

Question

如果你看这个小提琴：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

由于您使用固定定位和应用溢出设置，因此只会滚动#content区域。

考虑一下：

1）将橙色背景颜色添加到body元素并删除其边距：

body {
    margin:0px;
    padding:0px;
    background-color: orange;
    overflow-x: hidden;
    overflow-y: auto;
}

2）相对定位其他元素：

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

#container {
    position:relative;
}

http://jsfiddle.net/PybrF/6/

---

编辑：

我仍然不清楚你在寻找什么，但这是另一种方法。 这个保持标题固定并将滚动条放在#content区域内。

body {
    background-color: orange;
    margin:0px;
}
#header {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 100%;
    background-color: yellow;
    z-index:1; /* keep the header on top of the content */
}
#content {
    position:relative;
    padding-top:50px; /* height of the header */
}

http://jsfiddle.net/PybrF/8/

Answer 2

在你的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函数连接到resize事件，将内容的高度设置为页面高度减去高度标题。老实说，我不知道另一个解决方案。

Answer 3

好的，我知道它必须有效：

仍然找到一些旧的类似代码并重构它：

玩得开心！ ：）

Sorry for telling crap.

删除宽度/高度百分比设置并使用左/右/底部等设置。太多了。

忘记很久以前来自这个其他项目的主要div。

http://jsfiddle.net/bastien/PybrF/12/