独立滚动的 div，一个带有固定的页眉和页脚答案

【问题标题】：Independently scrolling divs, one with fixed header & footer独立滚动的 div，一个带有固定的页眉和页脚
【发布时间】：2016-05-23 19:01:40
【问题描述】：

我有两个独立滚动的 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 的滚动，这两列就不再独立滚动了。

有什么建议吗？

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

这将调整为您的列中的任何width。这个想法是你只让.col-2.content 可滚动，而不是整个.container。

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
}

.container {
  height: 100%;
}

.col-1{
  float: left;
  width: 33%; 
  overflow: auto;
}

.col-2{
  float: left;
  width: 67%;
  position: relative;
}

.col-2 .content {
  position: absolute;
  left: 0; right: 0;
  top: 20px; /* header height */
  bottom: 20px; /* footer height */
  overflow: auto;
}

.header, .footer {
  height: 20px;
  background-color: red;
  position: absolute;
  left: 0; right: 0;
}

.header {
  top: 0;  
}

.footer {
  bottom: 0;
}

【讨论】：

【解决方案2】：

这样的东西对你有用吗？

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

【讨论】：