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

Question

我需要填写 剩余的垂直空间 的#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>

Answer 1

您可以像这样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;
}