Question

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

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

scrollbar

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中缺少什么？谢谢你们。

// 编辑作为对此处最佳答案的回复（致John Gray）

评论下面的评论：

scrollbar_2

Answer 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;
}

Answer 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;
}

Answer 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;
}

CSS：Scrollbar在窗口下方几个像素处开始

3 个答案: