CSS : 从特定 div 开始滚动条

Question

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

下方出现

.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 的 scroll-bar 并且 header 部分应该占据整个宽度。

任何帮助都会很棒。

谢谢。

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>

Answer 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 以匹配页眉的高度。

CSS : 从特定 div 开始滚动条

CSS : start scroll bar from specific div

html

css

scrollbar