使div（高度）占据父级剩余高度

Question

我有一个div带两个孩子的容器。第一个孩子有给定的身高。如何让第二个孩子占据容器的“自由空间” div而不给其指定高度？

在示例中，粉红色div也应占据白色空间。

与此问题类似：如何使div占据剩余高度？

但是我不想摆 绝对的位置 。

Answer 1

可以通过多种方式扩展#down子级以填充剩余的空间，#container具体取决于您希望获得的浏览器支持以及是否#up具有定义的高度。

样本

.container {

  width: 100px;

  height: 300px;

  border: 1px solid red;

  float: left;

}

.up {

  background: green;

}

.down {

  background: pink;

}

.grid.container {

  display: grid;

  grid-template-rows: 100px;

}

.flexbox.container {

  display: flex;

  flex-direction: column;

}

.flexbox.container .down {

  flex-grow: 1;

}

.calc .up {

  height: 100px;

}

.calc .down {

  height: calc(100% - 100px);

}

.overflow.container {

  overflow: hidden;

}

.overflow .down {

  height: 100%;

}


<div class="grid container">

  <div class="up">grid

    <br />grid

    <br />grid

    <br />

  </div>

  <div class="down">grid

    <br />grid

    <br />grid

    <br />

  </div>

</div>

<div class="flexbox container">

  <div class="up">flexbox

    <br />flexbox

    <br />flexbox

    <br />

  </div>

  <div class="down">flexbox

    <br />flexbox

    <br />flexbox

    <br />

  </div>

</div>

<div class="calc container">

  <div class="up">calc

    <br />calc

    <br />calc

    <br />

  </div>

  <div class="down">calc

    <br />calc

    <br />calc

    <br />

  </div>

</div>

<div class="overflow container">

  <div class="up">overflow

    <br />overflow

    <br />overflow

    <br />

  </div>

  <div class="down">overflow

    <br />overflow

    <br />overflow

    <br />

  </div>

</div>

格网

CSS的grid布局提供了另一种选择，尽管它可能不如Flexbox模型那么简单。但是，只需要设置容器元素的样式即可：

.container { display: grid; grid-template-rows: 100px }

所述grid-template-rows定义的第一行作为固定100px的高度，并且保持行会自动拉伸以填充剩余的空间。

我非常确定IE11需要-ms-前缀，因此请确保在希望支持的浏览器中验证html" target="_blank">功能。

弹性盒

现在，CSS3的灵活框布局模块（flexbox）得到了很好的支持，并且可以非常容易地实现。由于它具有灵活性，因此即使在#up没有定义的高度时也可以使用。

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

重要的是要注意，IE10和IE11对某些flexbox属性的支持可能会出现问题，而IE9或更低版本完全不支持。

计算高度

另一个简单的解决方案是使用CSS3calc功能单元，正如Alvaro在他的回答中指出的那样，但是它要求第一个孩子的身高是一个已知值：

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

它得到了广泛的支持，唯一值得注意的例外是<= IE8或Safari 5（不支持）和IE9（部分支持）。其他一些问题包括将 calc 与_transform_ 或 box-shadow 结合使用，因此如果您担心此问题，请确保在多个浏览器中进行测试。

其他选择

如果需要较早的支持，则可以添加height:100%;，#down使粉红色div完全高出一个警告。因为#up将其向下推，将导致容器溢出。

因此，您可以添加overflow: hidden;到容器中以解决此问题。

或者，如果的高度#up是固定的，则可以将其绝对放置在容器中，并在上添加padding-top #down。

并且，另一个选择是使用表格显示：

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​