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

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -