html - CSS : start scroll bar from specific div

Question

我正在制作一个页面，其中标题部分是固定的，中心内容是滚动的。我希望标题部分占据整个页面，包括滚动条区域，并且我希望滚动条从标题下方出现。

.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 的滚动条，标题部分应该占据整个宽度。

任何帮助都会很棒。

谢谢。

Answer 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>