CSS：从特定的 div 开始滚动条答案

【问题标题】：CSS : start scroll bar from specific divCSS：从特定的 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 的滚动条，并且标题部分应该占据整个宽度。

任何帮助都会很棒。

谢谢。

【问题讨论】：

标签： html css scrollbar

【解决方案1】：

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

【讨论】：

感谢您的回答，但滚动条隐藏在我不想要的标题后面。
检查更新的答案，给出margin-top:60px，与标题高度相同。
滚动条仍然隐藏在标题后面。我希望从中心内容 div 开始滚动条。
它会做你想做的，只要按照上面的sn-p。
很高兴！我可以帮忙。

【解决方案2】：

将你的 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 中添加滚动条。

我还更正了 .center_content 的 margin-top 以匹配标题的高度。

【讨论】：