html – 固定div与100％宽度重叠滚动条

2023年12月30日 336次阅读

正如这里所示：
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下面.我究竟做错了什么？

最佳答案

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

固定定位元素具有“无宽度和高度”.

希望能帮助到你 ：)

编辑：见这支笔：This

PS.我猜你也想删除.content的边距

点赞