Unless I am misunderstanding, you can just add height: 100%;
and overflow:hidden;
to #down
.
#down {
background:pink;
height:100%;
overflow:hidden;
}?
Edit: Since you do not want to use overflow:hidden;
, you can use display: table;
for this scenario; however, it is not supported prior to IE 8. (display: table;
support)
#container {
width: 300px;
height: 300px;
border:1px solid red;
display:table;
}
#up {
background: green;
display:table-row;
height:0;
}
#down {
background:pink;
display:table-row;
}?
Note: You have said that you want the #down
height to be #container
height minus #up
height. The display:table;
solution does exactly that and this jsfiddle will portray that pretty clearly.