div與高度100％不填充定位與flex的父母

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

它爲什麼不起作用？（更新從@mrmcgreg：它無法在Chrome工作，但工作於FF）

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; 
}

來源

2016-07-30 Matthew

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

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

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

我檢查你的小提琴。似乎在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; 
}

來源

2016-07-30 12:45:38 liquidRock

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

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

div與高度100％不填充定位與flex的父母

回答

相關問題