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

Question

我有一个父母的div有两个孩子。其中一个孩子不会一直显示。如何让其他孩子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>