css - 高度为 : 100% getting pushed by siblings 的子元素

Question

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

<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 一直拉伸(stretch)到那个高度，不管它的内容有多少。使用 height: 100% 可以达到目的，直到您添加一些其他元素将内容向下推。

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

设置 overflow: hidden 显然会 overflow hidden 的内容，但这不是我的选择。

有什么方法可以用纯 CSS 实现吗？

Demo of my problem

Answer 1

自从提出并回答了这个问题以来，出现了实现此目的的更好方法:flex-box .

只需将父项的显示设置为“flex”并将 flex-direction 设置为“column”，并将“stretchy”子项的高度设置为“inherit”。子项将继承一个高度，无论剩余多少像素来填充其父项。

在下面的示例中，标记为/* 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>