我需要用#second div填满#first以下#wrapper个中的remaining vertical space个.
我需要一个唯一的CSS解决方案.
#wrapper {
width: 300px;
height: 100%;
}
#first {
width: 300px;
height: 200px;
background-color: #F5DEB3;
}
#second {
width: 300px;
height: 100%;
background-color: #9ACD32;
}<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>您可以使用#second div上的position:absolute;执行此操作，如下所示:
100
CSS :个个
#wrapper{
position:relative;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
EDIT : Alternative solution个
根据您的布局和这些div中的内容，您可以使它变得更简单，并且使用更少的标记，如下所示:
100
HTML :
<div id="wrapper">
<div id="first"></div>
</div>
CSS :个个
#wrapper {
height:100%;
width:300px;
background-color:#9ACD32;
}
#first {
background-color:#F5DEB3;
height: 200px;
}