Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

所以，我想要一个来自center-content div的滚动条，标题部分应该占据整个宽度。

任何帮助都会很棒。

谢谢。

Answer 1

您可以使用Mon - Sat 08:00 - 18:00属性，例如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;
}

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开始滚动条

2 个答案: