如何從兩個堆積DIV的頂部DIV影響另一個的高度

Question

如標題所示，我有兩個堆積<div> s。

他們被放置在一個絕對定位的容器，覆蓋整個頁面。基本上，這些合併在一起的還應該覆蓋容器的整個空間。

另一個重要的方面是這些<div>有動態內容。 底部可以有很多內容，所以需要一個overflow: auto規則。 頂部人們也可以擁有動態內容，但它並不真正被期望失控。因此，我不想減少溢出。

主要問題是：頂端的一個如何影響另一個人的身高而沒有重疊的風險？ （我喜歡CSS只的解決方案，或者東西不會暗示JS像素值計算）

這裏是描述最好的是什麼我想實現兩個圖像：

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

這裏也是一個的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%; 
} 

http://jsfiddle.net/xqh2vw2g/