Question

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

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

Answer 2

你的小提琴是空的。您可以尝试以下代码：

div{   
overflow:auto;
}

或

div{   
overflow-wrap:auto;
}

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

如何在达到窗口高度时进行div滚动

4 个答案: