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

Question

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

htmlcsspositionscrollbarmove

3

我希望我的页眉固定在页面顶部，整个内容（包括页脚）可以滚动。如下所示，页眉高度为60像素，将其固定在顶部不是问题。

我想要解决的问题（仅使用CSS）是让滚动条从这60像素以下开始。正如您所看到的，滚动条底部（箭头2）实际上被隐藏/向下移动了。我猜是因为我的有问题的60px。

因此，过程如下图所示：

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 Grey）的回复

在您的评论下面的评论： scrollbar_2

- Nolog Lester

3个回答

0

你的内容高度与页面高度相等，但是你有一个页眉... 尝试使用这个：

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

- Vladimir Gordienko

谢谢，但是不用了。我已经尝试过这个方法，但它只适用于特定的窗口高度。看一下这个：浏览器窗口的大约300像素和900像素的高度（请查看我第一篇帖子中的第二张图片） - Nolog Lester

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

- N Djel Okoye

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Andersson · Accepted Answer

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