有两个孩子的父母div。即使没有显示其他孩子，也总是让一个孩子填满父母？

Question

我有一个容纳两个孩子的父div。其中一个孩子不会一直显示。如何让另一个孩子填充父母的高度而不会溢出？

我的第一个不会一直显示的孩子有一个固定的高度。我试着让第二个孩子达到100％的高度，如果没有显示第一个孩子，但是当第二个孩子出现溢出时，它会起作用。

这是我的问题的一个小提琴：

.parent {
    height: 400px;
    width: 400px;
    background: red;
    border: 1px solid black;
}

.child1 {
    height: 30px;
    background: green;
}

.child2 {
    height: 100%;
    background: blue;
}

http://jsfiddle.net/4fdf8ksy/

Answer 1

您可以使用flexbox layout。

只需将.parent元素的display设置为flex并添加flex-direction: column：

Updated Example

.parent {
  height: 400px;
  width: 400px;
  background: red;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
.child1 {
  height: 30px;
  background: green;
}
.child2 {
  height: 100%;
  background: blue;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>

Answer 2

您可以使用vh代替%。这意味着高度应为100%查看设备。

Jsfiddle

.parent {
  height: 400px;
  width: 400px;
  background: red;
  border: 1px solid black;
  display: block;
}
.child1 {
  height: 30px;
  background: green;
  display: none;
}
.child2 {
  height: 100vh;
  background: blue;
}

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>