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

本文介绍了CSS：滚动条在窗口下方开始几个像素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让我的标题固定：标题总是在页面的顶部，我的整个内容（包括页脚的一切）可以滚动。

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

HTML：

 <！DOCTYPE html& 
< head> 
 ... 
< / head> 
 
< body> 
< header> 
 ... 
< / header> 
 
< div id =content> 
 ... 
< / div> 
< / body> 
< / html>

CSS：

 code> 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答案b
$ b

注释下面的注释：

解决方案

这里是一个jsfiddle如何解决你的问题：

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

I'd like to have my header fixed: header is always at the top of page and my whole content (everything including footer) could be scrolled. Header is 60 px high as you can see below and it's not the problem to make it fixed at the top.

The problem I want to solve (using only CSS) is to have scrollbar starting below these 60 pixels from the top.As you can see, the bottom of the scrollbar (2. arrow) is actually hidden/moved down. I guess by my problematic 60px.So it goes like this:

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

What am I missing in my CSS?Thanks guys.

// Edit as a reply to the forst answer here (to John Grey)

Commentary below your comment:

解决方案

Here is a jsfiddle how to solve your problem:http://jsfiddle.net/sTSFJ/2/

Here is the 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;
}

这篇关于CSS：滚动条在窗口下方开始几个像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！