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

Question

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

我需要一个唯一的CSS解决方案.

HTML:

#wrapper {
  width: 300px;
  height: 100%;
}

#first {
  width: 300px;
  height: 200px;
  background-color: #F5DEB3;
}

#second {
  width: 300px;
  height: 100%;
  background-color: #9ACD32;
}

CSS:

<div id="wrapper">
  <div id="first"></div>
  <div id="second"></div>
</div>

Answer 1

您可以使用CSS Flexbox而不是另一个显示值.Flexbox Layout(Flexible Box)模块旨在提供一种更有效的方法来布置,对齐和分配容器中的项目之间的空间,即使它们的大小未知和/或动态.

例

/* CONTAINER */
#wrapper
{
   width:300px;
   height:300px;
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -ms-flex-direction: column;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* SOME ITEM CHILD ELEMENTS */
#first
{
   width:300px;
    height: 200px;
   background-color:#F5DEB3;

}

#second
{
   width:300px;
   background-color: #9ACD32;
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
}

jsfiddle例子

如果你想为旧的浏览器IE9一样或更低的全力支持,你将不得不使用一个polyfills像flexy,这种填充工具启用Flexbox的模型,但仅适用于2012规格Flexbox的模型的支持.

最近我发现另一个polyfill可以帮助你使用Internet Explorer 8和9或任何不支持flexbox模型的旧版浏览器,我还没有尝试过,但我在这里留下链接

您可以在此处找到Chris Coyer提供的有用且完整的Flexbox模型指南

Answer 2

Flexbox解决方案

注意:如果您的支持的浏览器需要,请添加flex供应商前缀.

html, body {
  height: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}

<div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div>

Answer 3

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

Answer 4

如果你可以添加一对额外的div,那么你的html看起来像这样:

<div id="wrapper">
    <div id="first" class="row">
        <div class="cell"></div>
    </div>
    <div id="second" class="row">
        <div class="cell"></div>
    </div>
</div>

您可以使用以下display:table属性:

#wrapper
{
   width:300px;
   height:100%;
   display:table;
}

.row 
{
   display:table-row;
}

.cell 
{
   display:table-cell;
}

#first .cell
{
   height:200px;
   background-color:#F5DEB3;
}

#second .cell
{
   background-color:#9ACD32;
}

例