达到窗口高度时如何使div滚动

Question

我使用 bootstrap 开发了一个模板，下面的Fiddle代表了预期的布局，当里面的内容达到窗口高度时，我希望黄色区域能够滚动，而右侧的红色面板保持固定。

HTML

<div class="header">
Header
</div>

<div class="content">

  <div class="left-panel">
      <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
      <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
       <div class="dummy-content">
          Results
      </div>
  </div>
  <div class="right-panel">
    Map
  </div>

</div>

<div class="footer">
Footer
</div>

CSS

body{
  text-align:center;
  width:100%;
  height:100%;
}
.header{
  background:black; 
  color:#fff;}

.left-panel{
    background:yellow;
    overflow-y: scroll;
    float:left;
    width:50%;
    height:100%;
}
.dummy-content{
    height:150px;
}
.right-panel{
    background:tomato;
    height:100%;
    float:right;
    width:50%;
}

.footer{
  background:grey;
  position:absolute;
  bottom:0;
  width:100%;
 }      

.content > div{
  display:inline-block;
  vertical-align:top;
}

.content{
  clear:both;
}

我的问题是

• 当内容增加并达到窗口高度时，如何使里面的内容滚动
• 更改屏幕大小时，页脚不应与可滚动区域重叠
• 是否可以仅提供 css 修复

Answer 1

您可以使用calc()函数和vh单位来实现所需的输出：

.left-panel{
  background:yellow;
  overflow-y: scroll;
  float:left;
  width:50%;
  height:calc(100vh - 40px);
}

看到这个小提琴