html - html div 自动滚动的自动高度 - Div 获取剩余高度

Question

我有一个非常简单但令人困惑的问题我遇到的问题是我有一些 div。第一个 div 固定在右上角，高度为 100%，这个 div 在 div2 和 div3 中还有 2 个 div 都应该滚动。

其中一个上层 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/

Answer 1

这是更新后的 fiddle : 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>