有兩個孩子的父母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>