2

我想修复我的页眉：页眉始终位于页面顶部，我的整个内容（包括页脚在内的所有内容）都可以滚动。标题为 60 px 高，如下所示，将其固定在顶部不是问题。

我要解决的问题（仅使用 CSS）是让滚动条从顶部开始低于这 60 个像素。 如您所见，滚动条的底部（2. 箭头）实际上是隐藏/向下移动的。我猜我有问题的 60 像素。所以它是这样的：

滚动条

HTML：

<!DOCTYPE html>
<head>
...
</head>

<body>
    <header>
        ...
    </header>

    <div id="content">
        ...
    </div>
</body>
</html>

CSS：

html, body {
    height: 100%;
}

body {
    background: #d0d0d0;
    overflow-y: hidden; 
}

header { 
    background: #fff;
    height: 60px;
    width: 100%;

    position: fixed;
    top: 0;
}


#content {
    margin-top: 60px;
    height: 100%; 
    width: 100%;

    overflow-y: scroll;
}

我的 CSS 中缺少什么？多谢你们。

//编辑作为对这里 forst 答案的回复（对 John Grey）

您的评论下方的评论：

滚动条_2

4

3 回答 3

2

这是一个 jsfiddle 如何解决您的问题：http: //jsfiddle.net/sTSFJ/2/

这是CSS：

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#wrapper {
    width: 100%;
    height: 100%;
    margin: auto;
    position: relative;
}

#header {
    height: 40px;
    background-color: blue;
    color: #fff;
}

#content {
    position:absolute;
    bottom:0px;
    top: 40px;
    width:100%;
    overflow: scroll;
    background-color: #fff;
    color: #666;
}​
于 2012-11-02T10:45:24.227 回答
0

您的#content 高度等于身体高度，但您有一个标题，所以......尝试使用这个：

html, body {
    height: 100%;
}

body {
    background: #d0d0d0;
    overflow-y: hidden; 
}

header { 
    background: #fff;
    height: 5%;
    width: 100%;

    position: fixed;
    top: 0;
}


#content {
    margin-top: 5%;
    height: 95%; 
    width: 100%;

    overflow-y: scroll;
}
于 2012-11-02T10:16:12.330 回答
0

您可以使用 calc 属性解决此问题。这不是 95% 的高度，因为您不知道 5% == 60px 是否而是执行以下操作：-

#content {
    margin-top: 5%;
    height: calc(100%-60px); 
    height: -webkit-calc(100%-60px); /*For webkit browsers eg safari*/
    height: -moz-cal(100%-60px); /*for firefox*/
    width: 100%;
    overflow-y: scroll;
}
于 2017-11-08T11:50:08.357 回答