CSS：滚动条在窗口下方几个像素处开始答案

【问题标题】：CSS: Scrollbar starts few pixels below the windowCSS：滚动条在窗口下方几个像素处开始
【发布时间】：2012-11-02 10:11:47
【问题描述】：

我想修复我的页眉：页眉始终位于页面顶部，我的整个内容（包括页脚在内的所有内容）都可以滚动。标题为 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）

评论下方的评论：

【问题讨论】：

标签： html css position scrollbar move

【解决方案1】：

这是一个 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;
}

【讨论】：

几乎完美。现在我需要将标题放在滚动条上方——尤其是阴影。它（这些 4px 的阴影）应该在滚动条的上方。使用 z-index: 5;在 header{} 和 z-index 中：-1；在#content 中没有帮助。看看这个：jsfiddle.net/jBfwY
这个方案是有问题的，因为需要提前知道header的高度。

【解决方案2】：

您的#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;
}

【讨论】：

谢谢，但没有。我已经尝试过了，它只适用于特定的窗口高度。看看这个：大约。 300px vs 900px 浏览器窗口高度（查看我第一篇文章中的第二张图片）

【解决方案3】：

您可以使用 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;
}

【讨论】：