html div自動滾動的自動高度 - div取剩餘高度

Question

我有一個非常簡單但令人困惑的問題，我遇到的問題是我有一些div。第一個div被固定在右上方，高度爲100％，這個div在div2和div3裏面還有2個div應該滾動。

其中一個uper div2將高度從100px變爲200px之後，它應該滾動，並且帶div的div 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

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

Answer 2

你能做的就是設置DIV2到 「固定」 的高度，然後將其他選項設置保證金上面的div2到相同的高度，然後使用自動高度。這裏是做一些事情非常接近，你在做什麼的jsfiddle，但它是一個多一點程式化，並固定頂部的div：

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

希望幫助雅了！