儿童元素与身高：100%被兄弟姐妹推

我有一个非常简单的结构：

<div class="parent">
    <h1>Element taking space</h1>
    <div class="stretch">
        Not much content, but needs to be stretched to the end.
    </div>
</div>

家长div有一个设定的高度，我想要div.stretch一直延伸到那个高度，无论它的内容有多么少。使用height: 100%这样做就可以了，直到您添加一些其他元素来将内容向下推。

我想指定height: 100%意味着该元素应该具有与父元素完全相同的绝对/计算高度，而不是计算完所有其他元素后高度的剩余部分.

Setting overflow: hidden显然隐藏了溢出的内容，但这对我来说不是一个选择。

有什么办法可以用纯 CSS 实现这一点吗？

Demo of my problem http://jsbin.com/edibay/1/edit

自从提出并回答这个问题以来，出现了一种更好的方法来实现这一目标：flex-box https://www.w3.org/TR/css-flexbox-1/.

只需将父级的显示设置为“flex”，将 flex-direction 设置为“column”，并将“可伸缩”子级的高度设置为“继承”即可。无论剩余多少像素，子级都会继承高度以填充其父级。

在以下示例中，标记为 /* important */ 的行是实际解决方案的一部分； CSS 的其余部分只是为了使其在视觉上更容易理解。

.parent {
  display: flex; /* important */
  flex-direction: column; /* important */
  height: 150px;
  border: 6px solid green;
}

h1 {
  background: blue;
  margin: 0px;
  height: 90px
}

.stretch {
  background: red;
  height: inherit; /* important */
}

<div class="parent">
    <h1>Element taking space</h1>
    <div class="stretch">
        Not much content, but needs to be stretched to the end.
    </div>
</div>