两个垂直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的小提琴。

干杯