固定的div有100%的宽度重叠滚动条

Question

如下所示：http://codepen.io/anon/pen/rVPqeL

我使用了3个简单的div，我想获得一个"全局"滚动条的效果，它必须在标题上。

html是非常基本的

<div class="container">
    <div class="header">
    </div>
    <div class="content">
    </div>
</div>

这是css：

.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
  overflow-y: scroll;
}
.header {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}
.content {
  margin-top: 50px;
  min-height: 2500px;
  background-color: blue;
}

滚动条在标题div下一直。我做错了什么？

Answer 1

我尝试用position:sticky替换position:fixed，并添加了top:0，这对我来说效果很好，不再有重叠的垂直滚动条。

.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: red;
}

Answer 2

下面的代码完成了任务http://codepen.io/anon/pen/XbOxgp

.container {
  background-color: gray;
  overflow-y: scroll;
}
.header {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
  z-index: 2;
}
.content {
  z-index: 1;
  width: 100%;
  position: absolute;
  top: 60px;
  min-height: 2500px;
  background-color: blue;
}

Answer 3

如果我理解正确，您希望滚动条始终位于顶部。为此，请将css更改为以下

html{
    overflow-y: scroll;
}
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
}

在html上滚动将允许整个页面滚动，同时保持标题静态并从容器中删除滚动。

Answer 4

.container {
  margin-top:50px; /* create room for header*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: gray;
  overflow-y: scroll;
}
.header {
  margin-top:-50px; /* move up by 50px*/
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
}

固定位置的元素"没有宽度和高度"。

希望有帮助：(

编辑：查看此笔：此

Ps。我猜您还想删除.content 的边距

Answer 5

从.container 中删除overflow-y: scroll;

Answer 6

将overflow-y: scroll;放入主体元素：

body {
 overflow-y: scroll;
}
.container {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: gray;
}