The following code works if the page has enough space to host all divs, but if I resize at minimum the page the two divs positioning absolute overlap. How can I avoid that?
UPDATE #1
As required the code on JSFiddle (but if the two divs have position: absolute
it doesn't seem to work).
Ok, I got an equivalent result by changing approach.
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;
}