2016-07-30 147 views
3

我嘗試有一個div來填充它的父母,它已與flexbox佈局定位。 正如你可以在下面的jsfiddle中看到的,div的高度不會填充父項的高度。div與高度100%不填充定位與flex的父母

它爲什麼不起作用? (更新從@mrmcgreg:它無法在Chrome工作,但工作於FF)

https://jsfiddle.net/z73pjtox/1/

HTML:

<header id="header"> 
    header 
</header> 

<div id="content"> 
     <div> 
     height: 100% 
     </div> 
</div> 

CSS:

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    display: flex; 
    flex-flow: column; 
} 
#header { 
    flex: 0 1 auto; 
    background-color: green; 
} 
#content { 
    flex: 1 1 auto; 
    background-color: blue; 
} 
#content div { 
    height: 100%; 
    background-color: red; 
} 
+1

它做你FF想要什麼。只是一個觀察。 – mrmcgreg

+0

@mrmcgreg哈哈感謝您的信息,我正在開發僅適用於Chrome的用戶(Intranet),所以它沒有進入我對FF的測試中。可惜的是,在Chrome瀏覽器上它不能正常工作 – Matthew

+2

如果你爲'#content'元素聲明'display:flex',它將以chrome的方式工作,刪除在'#content'元素上聲明的'height:100%'規則嵌套'#content div'元素,然後將'flex:1'添加到此元素,以便它可以填充任何可用空間。 **小提琴:** https://jsfiddle.net/hLrsrd33/ – UncaughtTypeError

回答

0

我檢查你的小提琴。似乎在Mac上的Firefox 47上工作。你使用的是什麼瀏覽器?

我分叉小提琴,並改變了一些設置,以確保它做的是預期的,但它的工作原理是一樣的。但是,在較早版本的Safari中,它不適用於此。也許嘗試添加供應商前綴,看看是否有幫助?

檢查此link on CSS Tricks所有的前綴。

fiddle

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
} 
#header { 
    height:30px; 
    background-color: green; 
} 
#content { 
    display:flex; 
    flex-direction:column; 
    flex:1; 
    background-color: blue; 
} 
#content div { 
    flex:1; 
    height: 100%; 
    background-color: red; 
} 
+0

它在FF上工作,但不在Chrome上。在Chrome上檢查我的jsfiddle,以及你的。你是如何工作的?試圖找出它 – Matthew

+0

嘿男人。我更新了我的代碼和小提琴鏈接。它在Mac上適用於Chrome和Firefox。我只是將內容製作爲柔性版,並將其同時改爲柔性方向而不是柔性流。我沒有用過很多flex,所以希望這是正確的:)如果它工作正常 – liquidRock