填充剩余的垂直空间-仅CSS

通风:

我需要填写剩余的垂直空间#wrapper#first#secondDIV。

我只需要一个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;#seconddiv 上执行此操作:

小提琴

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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章