Html CSS：滚动条从窗口下方的几个像素开始_Html_Css_Position_Scrollbar_Move

Html CSS：滚动条从窗口下方的几个像素开始

html css

Html CSS：滚动条从窗口下方的几个像素开始,html,css,position,scrollbar,move,Html,Css,Position,Scrollbar,Move,我希望我的页眉是固定的：页眉总是在页面的顶部，我的全部内容（包括页脚）都可以滚动。标题是60像素高，你可以看到下面，这不是问题，使其固定在顶部我想解决的问题（仅使用CSS）是让滚动条从顶部开始低于这60个像素。如您所见，滚动条（2.箭头）的底部实际上是隐藏/向下移动的。我猜我的问题是60px。所以它是这样的： HTML: <!DOCTYPE html> <head> ... </head> <body> <header>

我希望我的页眉是固定的：页眉总是在页面的顶部，我的全部内容（包括页脚）都可以滚动。标题是60像素高，你可以看到下面，这不是问题，使其固定在顶部

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

HTML:

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

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

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

我的CSS缺少什么？谢谢各位

//编辑作为对此处forst答案的回复（给John Grey）

评论如下：

您的#内容高度等于身体高度，但您有一个标题，因此。。。尝试使用以下方法：

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

以下是解决您的问题的方法：

以下是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;
}

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

谢谢，但是不行。我已经试过了，它只适用于特定的窗户高度。看看这个：浏览器窗口的高度约为300像素对900像素（查看我第一篇文章中的第二张图片），几乎完美无瑕。现在我需要把我的标题放在滚动条上面，尤其是阴影。它（这4倍的阴影）应该在滚动条的上方。使用z指数：5；在头{}和z-索引中：-1；内容没有帮助。看看这个：这个解决方案是有问题的，因为它需要事先知道收割台的高度。

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