Question

正如标题所示，我有两个堆叠<div> s。

将它们放置在覆盖整个页面的绝对定位的容器中。基本上，这两个<div>合在一起，也应该涵盖整个空间。

另一个重要方面是这些<div>具有动态内容。 bottom 可以包含大量内容，因此需要overflow: auto规则。 top 还可以包含动态内容，但实际上并不会失控。因此，我不想减少溢出。

主要问题是：最高的一个如何影响另一个人的身高而没有重叠的风险？（我更喜欢 仅限CSS 解决方案，或者不会暗示JS像素值计算的内容）

以下两张图片描述了我想要达到的最佳效果：

为方便起见，这里也是一个JSfiddle：http://jsfiddle.net/60qan4t6/

Answer 1

这是display:flex处理得非常好的情况。更新你的小提琴： http://jsfiddle.net/60qan4t6/1/

注意，我很快写了这个，所以它缺少支持某些浏览器的浏览器前缀，但小提琴应该可以在Chrome中使用。

请务必在此处查看对flexbox的支持浏览器支持： http://caniuse.com/#feat=flexbox

Answer 2

如果将高度设置为div可接受，则可以使用这样的示例

.top-area {
    background: red;
    overflow: hidden;
    height: 40%;
}

.bottom-area {
    overflow: auto;
    height: 60%;
}