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

Question

我想达到以下要求。让我们说我在主容器内有两个容器（顶部和底部）：

1）只有当每个容器中的内容溢出时，顶部和底部容器都需要可滚动

2）随着内容的增长，顶部容器的最大高度需要上限为50％

3）底部容器的最大高度实际上取决于顶部容器的高度。 例如，如果顶部容器包含30％的高度，则底部容器在其高度大于70％时可滚动。

我尝试将顶部容器可滚动区域的max-height设置为50％。 它并没有像预期的那样显示出50％。

有没有办法在不使用flex-box的情况下实现这一点，因为我需要支持旧的IE版本。

非常感谢任何帮助。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这个怎么样？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

干杯