如何避免在div定位相對內定位絕對兩個div之間的重疊？

Question

如果頁面有足夠的空間來託管所有div，但是如果我調整頁面的最小大小，則兩個div定位絕對重疊，以下代碼可以工作。我怎樣才能避免這種情況？

這是我的HTML：

<div id="div-chatroom"> 
    <div id="div-messages">messages here</div> 
    <div id="div-sending">sending tools here</div> 
</div> 

這是我的CSS：

#div-chatroom { 
    position: relative; 
    height: calc(100% - 70px); /* IE9+ and future browsers */ 
    height: -moz-calc(100% - 70px); /* Firefox */ 
    height: -webkit-calc(100% - 70px); /* Chrome, Safari */ 
    padding: 0; 
    text-align: center; 
    margin: 0; 
    border-right: 2px solid #333333; 
    overflow: auto; 
} 

#div-messages { 
    position: absolute; 
    top: 10px; 
    bottom: 110px; 
    left: 10px; 
    right: 10px; 
    min-height: 200px; 
    overflow: auto; 
} 

#div-sending { 
    position: absolute; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    height: 100px; 
} 

更新＃1
由於所需的代碼上JSFiddle（但如果兩個div有position: absolute它似乎沒有工作）。

Answer 1

好的，我通過改變方法得到了相同的結果。

CSS（JSFiddle）：

#div-chatroom { 
    position: relative; 
    height: calc(100% - 70px); /* IE9+ and future browsers */ 
    height: -moz-calc(100% - 70px); /* Firefox */ 
    height: -webkit-calc(100% - 70px); /* Chrome, Safari */ 
    padding: 0; 
    text-align: center; 
    margin: 0; 
    border-right: 2px solid #333333; 
    background-color: #ffffff; 
    overflow: auto; 
} 

#div-messages { 
    position: relative; 
    margin: 0; 
    padding: 0;  
    min-height: 200px; 
    height: calc(100% - 100px); /* IE9+ and future browsers */ 
    height: -moz-calc(100% - 100px); /* Firefox */ 
    height: -webkit-calc(100% - 100px); /* Chrome, Safari */ 
    background-color: green; 
    overflow: auto; 
} 

#div-sending { 
    position: relative; 
    margin: 0; 
    padding: 0;  
    height: 100px; 
    background-color: red; 
} 

Answer 2

位置的全部用途：絕對是指元素不被依賴或頁面上的任何其他元素（除了它的父級），您實際上無法實現此目的。如果你想相應地調整它們，你可以使用除絕對值以外的位置風格來做到這一點。將您的代碼發佈到jsfiddle，然後我們將能夠提供良好的解決方案。