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的父母

回答

相关问题