CSS3 : how to put height 100% on a static/relative (no absolute positionned) div?

Question

我有一个容器和 2 个 div: 1 个标题(如果我添加一些行，其高度应该是自由的)和一个 userList。 我希望 userList 具有容器的高度:知道怎么做吗？ (没有 JS 解决方案，如果没有位置更好:使用 asbolute)

#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>

Answer 1

现在，您的 .userList 与他的容器具有相同的高度，但黄色框向下。符合您要求的最佳解决方案如下:

您的要求:

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>

我唯一需要的是取出 #header 部分，并将其与 #container 相同。通过这种模式，#container 和#userList 得到了相同的高度。