Chrome中的flexbox项目的高度不正确 [英] Height is not correct in flexbox items in Chrome
问题描述
我有一个微妙的问题，任何CSS古茹在那里。
我的绿色div有一个灵活的高度，占用剩余。
现在我想把一个div里面的div，应该是绿色div的一半。但是似乎如果Chrome把它当成整个页面的一半，而不是flex项目。
I've got a delicate problem for any CSS guru out there. My green div has a flexible height, taking up the remaining. And now I want to put a div inside that div which should be the half of the green div. But it seems like if Chrome treats it like half of the whole page rather than the flex item.
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
}
推荐答案
您可以绝对定位 div id =half_of_content。
#content {
flex: 1;
height: 100%;
background-color: green;
position: relative; /* new */
}
#half_of_content {
height: 50%;
background-color: yellow;
position: absolute; /* new */
width: 100%; /* new */
}
With regard to your statement:
但是似乎如果Chrome把它当成整个页面的一半
而不是flex项目。
But it seems like if Chrome treats it like half of the whole page rather than the flex item.
您给予正文 a height：100％ 。然后给它的孩子（ .wrapper ）a height：100％。然后给它的孩子（ .content ）a height：100％。 给予下一个孩子（ #half_of_content ）a height：50％当然是 body 的50％高度。
You gave the body a height: 100%. Then gave its child (.wrapper) a height: 100%. Then gave its child (.content) a height: 100%. So they're all equal height. Giving the next child (#half_of_content) a height: 50% would naturally be 50% height of body.
=http://www.w3.org/TR/CSS21/visudet.html#propdef-height =nofollow>您不需要指定父级高度。
With absolute positioning, however, you don't need to specify parent heights.
这篇关于Chrome中的flexbox项目的高度不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
