CSS :从特定的div启动滚动条
CSS :从特定的div启动滚动条
提问于 2017-01-30 12:47:02
我正在制作一个页面，其中的标题部分是固定的，中心内容正在滚动。我希望标题部分占据整个页面，包括滚动条区域，并且希望滚动条出现在标题下面。
.bg-dark{
background:#3a3f51;
}
.bg-dark-header{
position:fixed;
height: 60px;
width: 100%;
z-index:1000;
top: 0;
color:white;
}
.center_content{
margin-top:40px;
height:600px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="bg-dark bg-dark-header ">
Header Text
</div>
<div class="center_content text-center">
Center Content
Center ContentCenter ContentCenter ContentCenter ContentCenter Content
</div>
因此，我想要一个滚动条从center-content div和标题部分应该占据整个宽度。
任何帮助都会很好。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-30 12:50:42
您可以使用calc属性，在您的情况下是.center_content{ height: calc(body height - header-height);}
.center_content {
margin-top: 60px;
height: calc(100vh - 60px);
overflow: auto;
}
.bg-dark {
background: #3a3f51;
}
.bg-dark-header {
position: fixed;
height: 60px;
width: 100%;
z-index: 1000;
top: 0;
color: white;
}
.center_content {
margin-top: 60px;
height: calc(100vh - 60px);
overflow: auto;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="bg-dark bg-dark-header ">
Header Text
</div>
<div class="center_content text-center">
Center Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter
Content Center ContentCenter ContentCenter ContentCenter ContentCenter ContentCenter Content Center ContentCenter ContentCenter ContentCenter ContentCenter Content
</div>
Stack Overflow用户
发布于 2017-01-30 12:53:51
将css更改为：
body {
overflow: hidden;
}
.bg-dark{
background:#3a3f51;
}
.bg-dark-header{
position:fixed;
height: 60px;
width: 100%;
z-index:1000;
top: 0;
color:white;
}
.center_content{
margin-top:60px;
height:600px;
overflow-y: auto;
}它移除整个页面的滚动条，并将条添加到.center_content中。
我还更正了margin-top of .center_content以匹配标头的高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41936330
复制相关文章
相似问题
腾讯云开发者
