对于任何 CSS 专家来说，我都面临着一个棘手的问题。
我的绿色 div 具有灵活的高度，占据了剩余的高度。
现在我想在该 div 中放置一个 div，它应该是绿色 div 的一半。但 Chrome 似乎将其视为整个页面的一半而不是弹性项目。
http://jsfiddle.net/unh5rw9t/1/ http://jsfiddle.net/unh5rw9t/1/
HTML
<body>
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
</body>
CSS
html,body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
background-color: green;
}
#half_of_content {
height: 50%;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
@迈克尔_B https://stackoverflow.com/users/3597276/michael-b 解释了 https://stackoverflow.com/a/33589536/1529630为什么 Chrome 的行为是这样的：
你给了body a height: 100%。然后给了它的孩子（.wrapper)
a height: 100%。然后给了它的孩子（.content) a height: 100%.
所以他们的身高都是一样的。给予下一个孩子（#half_of_content) a height: 50%自然是 50% 的高度
的body.
然而，Firefox 不同意，因为事实上，height: 100% of .content被忽略，其高度根据下式计算flex: 1.
也就是说，Chrome 会解析相对于父级值的百分比height财产。 Firefox 根据父级解析的灵活高度来执行此操作。
正确的行为是 Firefox 的行为。根据确定尺寸和不定尺寸 http://www.w3.org/TR/css-flexbox-1/#definite-sizes,
如果要以百分比来解决弹性项目 http://www.w3.org/TR/css-flexbox-1/#flex-item’s
主要尺寸 http://www.w3.org/TR/css-flexbox-1/#main-size，以及弹性项目 http://www.w3.org/TR/css-flexbox-1/#flex-item has a definite http://www.w3.org/TR/css-flexbox-1/#definite 柔性
基础 http://www.w3.org/TR/css-flexbox-1/#flex-basis，以及柔性容器 http://www.w3.org/TR/css-flexbox-1/#flex-container has a definite http://www.w3.org/TR/css-flexbox-1/#definite 主要的
尺寸 http://www.w3.org/TR/css-flexbox-1/#main-size, the 弹性项目 http://www.w3.org/TR/css-flexbox-1/#flex-item’s 主要尺寸 http://www.w3.org/TR/css-flexbox-1/#main-size必须被视为definite http://www.w3.org/TR/css-flexbox-1/#definite为了解决百分比的目的，以及
百分比必须解决flexed 主要尺寸 http://www.w3.org/TR/css-flexbox-1/#main-size的弹性项目 http://www.w3.org/TR/css-flexbox-1/#flex-item（也就是说，在下面的布局算法被执行之后
已完成为弹性项目 http://www.w3.org/TR/css-flexbox-1/#flex-item’s 柔性容器 http://www.w3.org/TR/css-flexbox-1/#flex-container，以及柔性
物品 http://www.w3.org/TR/css-flexbox-1/#flex-item已获得其最终尺寸）。
以下是 Chrome 的解决方法：
#content {
display: flex;
flex-direction: column;
}
#content::after {
content: '';
flex: 1;
}
#half_of_content {
flex: 1;
height: auto;
}
这样可用空间#content将平均分配给#half_of_content和::after伪元素。
假设#content没有其他内容，#half_of_content将50%。在你的例子中你有一个2在那里，所以会少一点50%.
html,
body {
height: 100%;
margin: 0;
}
#wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
#menu {
height: 70px;
background-color: purple
}
#content {
flex: 1;
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
#content::after {
content: '';
flex: 1;
}
#half_of_content {
flex: 1;
background-color: yellow;
}
#footer {
height: 100px;
background-color: cyan
}
<div id="wrapper">
<div id="menu">
1
</div>
<div id="content">2
<div id="half_of_content">2.1</div>
</div>
<div id="footer" style="">
3
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
