Css div填充父高度答案

【问题标题】：Css div fill parent heightCss div填充父高度
【发布时间】：2017-03-14 03:57:00
【问题描述】：

我有以下 HTML

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

因此我创建了以下代码笔示例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>

【问题讨论】：

"为什么" ...喜欢它。我第一次在这个网站上看到这个词。常见于美国的创始文件和莎士比亚。不错！

标签： css flexbox

【解决方案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>

【讨论】：

很棒的解决方案，这正是对我有用的。谢谢。

【解决方案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>

【讨论】：