我需要填写剩余的垂直空间的#wrapper
下#first
用#second
DIV。
我只需要一个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>
您可以像这样position:absolute;
在#second
div 上执行此操作:
CSS:
#wrapper{
position:relative;
}
#second {
position:absolute;
top:200px;
bottom:0;
left:0;
width:300px;
background-color:#9ACD32;
}
编辑:替代解决方案
根据您的布局和这些div中的内容,您可以使它变得更加简单,并减少标记,如下所示:
HTML:
<div id="wrapper">
<div id="first"></div>
</div>
CSS:
#wrapper {
height:100%;
width:300px;
background-color:#9ACD32;
}
#first {
background-color:#F5DEB3;
height: 200px;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句