html - 两个垂直 div，每个都有最大高度的自动滚动

Question

我想达到以下要求。假设我在一个主容器中有两个容器(顶部和底部):

1)顶部和底部容器只有在每个容器中的内容溢出时才需要滚动

2) 随着内容的增长，顶部容器的最大高度需要限制在 50%

3) 底部容器的最大高度实际上取决于顶部容器的高度。例如，如果顶部容器包含 30% 的高度，当底部容器的高度大于 70% 时，底部容器可以滚动。

我尝试将顶部容器可滚动区域的最大高度设置为 50%。它没有按预期显示 50%。

有没有办法在不使用 flex-box 的情况下实现这一点，因为我需要支持旧的 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 的 fiddle 上积累了经验。

干杯