Question

我有两个独立滚动的div，一个带有页眉和页脚。

<body>
  <div class="container col-1">
    Many listings
  </div>
  <div class="container col-2">
    <div class="header">Fixed Header</div>
    <div class="content">Lots of content</div>
    <div class="footer">Fixed footer</div>
  </div>
</body>

看到这个小提琴：https://jsfiddle.net/bhmvv05n/

问题是，我希望第二个容器div有一个固定的页眉和页脚，它们总是可见的，只有可滚动的内容。

只要更改col-2 div的滚动，两列就不再独立滚动。

有什么建议吗？

谢谢！

Answer 1

这样的事情能为你效劳吗？

https://jsfiddle.net/vz7eb8uc/

代码已更改;

.col-1{
  float: left;
  width: 33%; 
    position: relative;

}
.col-2{
  float: left;
  width: 67%;
  position: relative;
}
.header, .footer {
  height: 20px;
  background-color: red;
  position: fixed;
  left: 33%;
  width:67%
}

Answer 2

这将根据您对列的.container { position: relative; background: #fff; z-index: 2; margin-bottom: 100px; /* Must be equal to footer height */ } .footer { position: fixed; bottom: 0; background: red; z-index: 1; width: 100%; height: 100px; }进行调整。这个想法是你只能使width可滚动，而不是整个.col-2.content。

.container

独立滚动div，一个带有固定标题和一个页脚

2 个答案: