两个堆叠DIV的顶部DIV如何影响另一个DIV的高度

As the title suggests, I have two stacking <div>s.

正如标题所示,我有两个堆叠

s。

They are placed in an absolutely positioned container that covers the whole page. Basically, those 2 <div>s, taken together, should also cover the whole space of the containier.

它们放置在一个绝对定位的容器中,覆盖整个页面。基本上,那些2

s合在一起,也应该覆盖整个空间。

Another important aspect is that these <div>s have dynamic content. The bottom one can have a lot of content, so an overflow: auto rule is required. The top one can also have dynamic content, but it's not really expected to grow out of control. Thus, I don't want to cut the overflow.

另一个重要方面是这些

具有动态内容。底部可以有很多内容,因此需要溢出:自动规则。最上面的一个也可以有动态内容,但实际上并不会失控。因此,我不想削减溢出。

The main question is: How can the top one affect the other one's height without the risk of overlapping? (I prefer a CSS only solution, or something that wouldn't imply JS pixel values computations)

主要问题是:顶部的一个如何影响另一个人的身高而没有重叠的风险? (我更喜欢只有CSS的解决方案,或者不会暗示JS像素值计算的东西)

Here are two images that describe the best what I'm trying to achieve:

这里有两张图片描述了我想要达到的最佳效果:

"initial state"
a state with some more data in the top div

顶部div中有更多数据的状态

Here is also a JSfiddle for convenience: http://jsfiddle.net/60qan4t6/

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

2 个解决方案

#1

This is the kind of situation that display:flex handles extremely well. Update to your fiddle: http://jsfiddle.net/60qan4t6/1/

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

Note, I quickly wrote this, so it's missing browser prefixes to support some browsers, but the fiddle should work in Chrome just fine.

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

Be sure to see check browser support for flexbox here: http://caniuse.com/#feat=flexbox

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

#2

If it's acceptable to set height to div's you can use such an example

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

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

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

http://jsfiddle.net/xqh2vw2g/

#1