CSS div 如何填充父元素高度？

Question

我有以下HTML

<div class="container">
  <div class="item-1">
    item 1
  <div>
  <div class="item-2">
    item 2
  <div>
</div>

因此，我创建了以下的 CodePen 示例http://codepen.io/anon/pen/EWXpVV

我想在父元素 div 的顶部放置蓝色的 div。剩余的父元素 div 高度应该填充第二个子元素 div（红色的）。

如何实现红色 div 的高度完全覆盖父 div 区域？

.container {
  background-color: green;
  height: 200px;
}

.item-1 {
  background-color: blue;
}

.item-2 {
  background-color: red;
}

<div class="container">
  <div class="item-1">
    item 1
  <div>
  <div class="item-2">
    item 2
  <div>
</div>

- René Winkler

---

“因此”……喜欢它。这是我在该网站上第一次看到这个词。通常可以在美国的建国文件和莎士比亚作品中找到。不错！ - Michael Benjamin

Answer 1

在父元素上使用 display: flex; flex-direction: column;, 在你想要占用剩余空间的元素上使用 flex-grow: 1. 你还需要正确地关闭你的 div 元素，使用 </div>

.container {
  background-color: green;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.item-1 {
  background-color: blue;
}

.item-2 {
  background-color: red;
  flex-grow: 1;
}

<div class="container">
  <div class="item-1">
    item 1
  </div>
  <div class="item-2">
    item 2
  </div>
</div>

- Michael Coker

---

很好的解决方案，这正是对我有用的。谢谢。 - Elie-M

Answer 2

试试这个：

.container {
  background-color: green;
  height: 200px;
}

.item-1 {
  background-color: blue;  
}

.item-2 {
  background-color: red;  
  height: 100%;
}  

<div class="container">
  <div class="item-1">
    item 1
  </div>
  <div class="item-2">
    item 2
 </div>
</div>

- jfatal