自动高度的HTML div自动滚动 - Div占据剩余高度

Question

我有一个非常简单但令人困惑的问题。我有一些 div，第一个 div 固定在右上角，高度为 100%，里面有两个 div：div2 和 div3。它们都应该滚动。

div2 的高度从 100px 变化到 200px，之后应该滚动，id 为 div3 的 div 应该占据剩余的高度并且如果数据增加应该滚动。

我能做到 div2，但 div3 没有占据剩余的高度。

我的代码是：

    <div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
<div style="width:100%;min-height:100px;max-height:200px;background:blue;overflow:auto;float:left;">
    ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>
</div>
<div style="width:100%;height:300px;background:yellow;float:left;overflow:auto;">
    ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/>ggdhhd<br/><br/>
</div>

我需要的是浏览器友好的东西。 如果您能给我建议，那将非常有帮助。

这是演示http://www.reurl.in/f84acc961

https://jsfiddle.net/fy727tLL/

- sonam Sharma

Answer 1

另一种选择是将div2设置为“固定”高度，然后在div2上方设置相同高度的余白，然后使用自动高度。这里有一个JSfiddle，非常接近您所做的事情，但它更加具有风格，有固定的顶部divs： http://jsfiddle.net/e13wzxgb/1/

#div2 {
position: absolute; 
top: 0;   
width: 800px; 
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white; 
}

#div3 {
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
height:auto;
margin-left:auto;
    margin-right: auto;
bottom: 0px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
    width: 800px;
}

希望这能帮助你！

- Justin C

Answer 2

这是更新后的代码片段链接： Fiddle

<div style="width:200px;height:100%;position:fixed;top:0px;right:0px;background:red;overflow:auto;">
  <div style="width:100%;height:20%;background:blue;overflow:auto;float:left;">
    ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>
  </div>
  <div style="width:100%;height:80%;background:yellow;float:left;overflow:auto;">
    ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>ggdhhd
    <br/>
    <br/>
  </div>
</div>

- Vicky Gonsalves

---

这里的固定div也是可滚动的，但div1不应该可以滚动。 - sonam Sharma

为此，您需要在div2和div3中都按百分比进行播放，如https://jsfiddle.net/fy727tLL/3/。 - Vicky Gonsalves