两个垂直 div，每个都具有最大高度的自动滚动答案

【问题标题】：Two vertical divs, each with auto scroll with max-height两个垂直 div，每个都具有最大高度的自动滚动
【发布时间】：2017-03-20 21:29:41
【问题描述】：

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

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>

【问题讨论】：

您将最大高度设置为 100 像素
@andrepaulo，我将最大高度设置为固定数字，以实现两个顶部和底部容器的自动滚动。将其设置为 50% 无效。
看看...jsfiddle.net/wq4p51ae/1是你需要的吗？
@andrepaulo，感谢您的回复。不完全是，顶部容器的高度需要从 0 到 50%，具体取决于它包含的内容量（动态）。
你想平衡顶部和底部 div 的大小...不让它们超过 50%？

标签： html css autoscroll

【解决方案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 的小提琴上。

干杯

【讨论】：

我在您提供的 sn-p 中看到水平但不是垂直的两个容器。