html相对定位重叠了,css – 如何避免在div定位相对内定位绝对的两个div之间重叠？...

如果页面有足够的空间来托管所有div,则以下代码有效,但如果我至少调整页面大小,则两个div定位绝对重叠.我怎么能避免这种情况？

这是我的HTML：

messages here

sending tools here

这是我的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有位置：绝对它似乎不起作用).