兩個垂直div，每個都有最大高度的自動滾動

Question

我想達到以下要求。比方說，我有兩個容器（頂部和底部）在主容器內：

1）兩個頂部和底部的容器必須是滾動的，只有當每個容器

2）頂櫃需要有最大的內容溢出隨着含量增加，高度限制在50％

3）底部容器的最大高度確實取決於頂部容器的高度。 例如，如果頂部容器包含30％的高度，則當底部容器的高度大於70％時，底部容器可滾動。

我試着將最大高度設置爲頂部容器可滾動區域的50％。 它沒有顯示50％的預期。

有沒有辦法實現這一點，而不使用彈性框，因爲我需要支持舊的IE版本。

任何幫助，非常感謝。

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 90%; 
 
    width: 30%; 
 
    display: table; 
 
} 
 

 
.top { 
 
    padding: 24px; 
 
    background: yellow; 
 
    display: table-row; 
 
} 
 

 
.top div { 
 
    overflow-y: auto; 
 
    max-height: 50%; 
 
} 
 

 
.bottom { 
 
    height: 100%; 
 
    padding: 24px; 
 
    background: tomato; 
 
    display: table-row; 
 
} 
 

 
.bottom div { 
 
    overflow-y: auto; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="top"> 
 
    <div> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
    </div> 
 
    </div> 
 
    <div class="bottom"> 
 
    <div> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

這件怎麼樣？

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    height: 300px; 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
.top { 
 
    padding: 24px; 
 
    background: #000000; 
 
    height: 300px; 
 
    width:40%; 
 
    float:left; 
 
    overflow: auto; 
 
    color:#ffffff; 
 
} 
 

 
.bottom { 
 
    height: 300px; 
 
    padding: 24px; 
 
    background: #ff0000; 
 
    color:#ffffff; 
 
    display: table-row; 
 
    width:40%; 
 
    float:left; 
 
} 
 

 
li{list-style:none;}

<div class="container"> 
 
    <div class="top"> 
 
    <div> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
    </div> 
 
    </div> 
 
    <div class="bottom"> 
 
    <div> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
     <li>DYNAMIC CONTENT</li> 
 
    </div> 
 
    </div> 
 
</div>

我已經建立了對@ andrepaulo的小提琴。

乾杯