twitter-bootstrap - 达到窗口高度时如何使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);
}

See this fiddle