2つの垂直div、それぞれが最大高さの自動スクロール付き

Question

私は以下の要件を達成したいと思います。のは、私が本体容器内部の二つの容器（上部と下部）を持っているとしましょう：

1）上部と下部の両方の容器は、各コンテナ

2の場合にのみ、コンテンツがオーバーフロースクロールする必要があります）上位コンテナが最大を持っている必要があります内容量が増えると高さが50％になります。

3）底面コンテナの最大高さは実際に上部コンテナの高さによって異なります。 たとえば、上部コンテナの高さが30％の場合、下部コンテナは高さが70％より大きくなるとスクロール可能になります。

トップコンテナスクロール可能領域の最大高さを50％に設定しようとしました。 期待どおりに50％表示されませんでした。

古いIE版をサポートする必要があるため、フレックスボックスを使用せずにこれを達成する方法がありますか？

ご協力いただきまして誠にありがとうございます。この約1

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のフィドルに築いてきました。

乾杯