Chrome 中 flexbox 项目的高度不正确

本文介绍了Chrome 中 flexbox 项目的高度不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于任何 CSS 大师，我都有一个棘手的问题.我的绿色 div 具有灵活的高度，占据了剩余的高度.现在我想在那个 div 里面放一个 div，它应该是绿色 div 的一半.但似乎 Chrome 将其视为整个页面的一半而不是 flex 项.

HTML

CSS

html,body {高度:100%；边距:0；}#包装{显示:弹性；弹性流:列；高度:100%；}#菜单 {高度:70px；背景颜色:紫色}#内容 {弹性:1；高度:100%；背景颜色:绿色；}#half_of_content {高度:50%；背景颜色:黄色；}#页脚{高度:100px；背景颜色:青色}

解决方案

你可以绝对定位div id="half_of_content".

#content {弹性:1；高度:100%；背景颜色:绿色；位置:相对；/* 新的 */}#half_of_content {高度:50%；背景颜色:黄色；位置:绝对；/* 新的 */宽度:100%；/* 新的 */}

演示

关于你的声明:

但是如果 Chrome 把它当作整个页面的一半来对待而不是弹性项目.

你给了 body 一个 height: 100%.然后给它的孩子(.wrapper)一个height: 100%.然后给它的孩子 (.content) 一个 height: 100%.所以他们的身高都是一样的.给下一个孩子 (#half_of_content) 一个 height: 50% 自然会是 #half_of_content 的 50%代码>正文.

然而，使用绝对定位，你不需要指定父级高度.

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
}

解决方案

You could absolutely position 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 */
}

DEMO

With regard to your statement:

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.

With absolute positioning, however, you don't need to specify parent heights.

这篇关于Chrome 中 flexbox 项目的高度不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！