0

如果你看这个小提琴：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 内部开始，而不是从标题/正文开始。

4

3 回答 3

0

由于您使用固定定位和溢出设置的应用，只有#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/

于 2013-05-30T21:16:44.987 回答
0

在你的 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;
}

会产生这个：

在此处输入图像描述

至于内容的高度要使用所有剩余的空间，我会通过一个连接到resize事件的js函数来将内容的高度设置为页面高度减去标题的高度。老实说，我不知道另一种解决方案。

于 2013-05-30T21:18:01.177 回答
0

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

仍然找到了一些旧的类似代码并对其进行了重构：

玩得开心！:)

Sorry for telling crap.

删除宽度/高度百分比设置并使用左/右/下等设置。够了。

忘记很久以前来自另一个项目的主 div。

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

于 2013-05-30T21:38:50.673 回答