2016-06-21 44 views
3

藍色箱子應該是100%的高度。它適用於爲div.a設置像素高度,但不幸的是,這不適用於真實世界的情況。高度:100%不能在柔性箱內工作flex-grow

這或許說明了一切: http://codepen.io/anon/pen/jrVEpB

.a{ 
 
    background-color:red; 
 
    display:flex; 
 
} 
 
.b1{ 
 
    flex-grow:0; 
 
    background-color:green; 
 
} 
 
.b2{ 
 
    flex-grow:1; 
 
    background-color:yellow; 
 
    height:100%; 
 
} 
 

 
.c{ 
 
    height:100%; 
 
    background-color:blue; 
 
}
<div class="a"> 
 
    <div class="b1"> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    
 
    </div> 
 
    <div class="b2"> 
 
     <div class="c"> 
 
      miksi et ole full height saatana 
 
     </div> 
 
    </div> 
 
</div>

+0

c上的高度:100%,它需要父母的高度。但沒有高度或100%的父母的高度是不是整個屏幕.. – MrBuggy

+1

刪除'高度:100%'在'.b2' – blonfu

回答

5

您不需要百分比的高度,以達到此佈局。它可以單獨彎曲特性來構建:

.a { 
 
    display: flex; 
 
    background-color: red; 
 
} 
 
.b1 { 
 
    background-color: green; 
 
} 
 
.b2 { 
 
    flex: 1; 
 
    display: flex; 
 
    background-color: yellow; 
 
} 
 
.c { 
 
    flex: 1; 
 
    background-color: blue; 
 
} 
 

 
body { margin: 0; }
<div class="a"> 
 
    <div class="b1"> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    <p>hurr durr</p> 
 
    </div> 
 
    <div class="b2"> 
 
    <div class="c"> 
 
     miksi et ole full height saatana 
 
    </div> 
 
    </div> 
 
</div>

如果使用百分比高度是必須的,然後再考慮適當的執行:

+0

我認爲這種行爲是奇怪的(但所有的瀏覽器似乎做所以)。 「靈活增長」元素中的100%如何不會達到其計算大小的100%? – einord

+1

@einord,完整的解釋在我的答案末尾的鏈接引用中。 –

1

你必須給div.a 100%的高度,因爲div.c和它的高度爲100%取其父母的高度。但是,當沒有任何高度,它不能100%工作... https://jsfiddle.net/h2yvoeL0/1/enter code here

乾杯。