css - css3 : how to put height 100% on a static/relative (no absolute positionned) div? -
i have container , 2 divs inside: 1 header (whose height should free if add lines) , userlist. want userlist have height of container : idea how ? (no js solution, better if no position: asbolute used)
#container { width: 300px; height:400px; background-color: #ff0000; } #header{ background-color: #fff500; } #userlist { background-color: #00ff00; width:290px; height: 100%; overflow-y:auto; }
<div id="container"> <div id="header">line1<br>line2<br>line3</div> <div id="userlist"> line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> </div> </div>
right now, .userlist
have same height container, yellow box goes down. best solution requirements this:
your requirements:
no js solution, better if no position: asbolute used)
#container { width: 300px; height:400px; background-color: #ff0000; } #header{ width: 300px; background-color: #fff500; } #userlist { background-color: #00ff00; width:290px; height: 100%; overflow-y:auto; }
<div id="header">line1<br>line2<br>line3</div> <div id="container"> <div id="userlist"> line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> </div> </div>
the need take out #header
division , give same #container
. mode, #container
, #userlist
have got same height.
Comments
Post a Comment