如何在达到 window 高度时使 div 可滚动

Question

我使用 bootstrap 开发了一个模板，下面的 Fiddle 表示预期的布局，我希望黄色区域在内容达到 window 高度时可以滚动, 而右边的红色面板保持固定。

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

我的问题是

如何在内容增加和达到 window 高度时使内容滚动
当屏幕尺寸改变时，页脚不应与可滚动区域重叠
是否可以仅提供 css 修复

Answer 1

您的 Fiddle 是空的。您可以尝试以下代码：

div{   
overflow:auto;
}

或

div{   
overflow-wrap:auto;
}

Answer 2

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

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

See this fiddle

Answer 3

在父 div 上，尝试使用

.left-panel
{
  overflow: scroll;
}

另外，确保给 div

一个固定的位置

Answer 4

overflow 需要设置 height。将子项的 height 设置为 0，并使其在父项中 grow。

.parent{
   display:flex;
   flex-direction:column;
   height:100%
}

.child{
   flex-grow:1;
   height:0;
   overflow:scroll;
}

如何在达到 window 高度时使 div 可滚动

How to make a div scroll able when window height is reached

css

overflow

responsive-design

twitter-bootstrap