如果页面有足够的空间来托管所有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有位置:绝对它似乎不起作用).