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>

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>

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>

Css div填充父高度

2 个答案: