高度在Chrome的flexbox项中不正确
对于任何CSS专家来说，我都有一个棘手的问题。我的绿色div的高度灵活，可以容纳剩余的高度。现在我想在该div中放置一个div，该div应该是绿色div的一半。但似乎Chrome是否将其视为整个页面的一半而不是flex项目。
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 */
}
关于您的声明：
但似乎Chrome是否将其视为整个页面的一半而不是flex项目。
您给body了height: 100%。然后给它的孩子（.wrapper）一个height: 100%。然后给它的孩子（.content）一个height: 100%。 因此它们的高度相等。
给下一个孩子（#half_of_content）height: 50%自然会是的50％高度body。
但是，在绝对定位的情况下，您无需指定父高度。
-
问题内容： 我有一个简单的2列布局，我想使用Flexbox获得相等的高度： 的HTML 的CSS 这适用于Firefox，但不适用于Chrome： 我尝试了一些方法（包括供应商前缀），但仍然无法正常工作。 问题答案： 要使用Flexbox创建两个相等的列： 父容器得到 每列都是由div创建的，它们可以增长/收缩 拉伸第一列的子级： 还提供了第一列，以便其子元素具有柔韧性并可以成长 旁边的孩子被给予
-
在另一个flex容器内的Flexbox列容器在Chrome中没有得到100%的高度，但在Firefox和Edge中都可以。 Codepen示例
-
问题内容： 我在flexbox列上遇到了麻烦，因为flex’d元素的子元素无法以百分比响应。我仅在Chrome浏览器中进行了检查，据我了解，这只是Chrome浏览器的问题。这是我的示例： HTML CSS 我想要它，以便红色填充蓝色。为什么不起作用？ 问题答案： TL; DR： 设置为，并摆脱on 。[您可以在此处查看修改后的CodePen。] 工作原理： 我从这个类似的问题中学到，根据flexb
-
我发现，如果我们设置一个块级元素的高度为或而没有设置父级的高度为显式值，并且它的块级子级有底部边距，那么它在Chrome中会计算不同的高度，而在Firefox中则不会。对于设置的情况： http://codepen.io/anon/pen/bjgkmr 块的高度将计算为的内容高度。我很困惑为什么应该和一样计算，因为父元素(和标记）没有显式地设置它的高度，而是有不同的高度，因为我们只是直接将高度设置
-
我遇到的问题是，当我在Flexbox中输入内容时，它的高度会增加。我不是100%确定为什么会发生这种情况，但我相信这与它没有处于绝对位置，从而保持其高度属性有关。 包括代码笔，我在这里为我正在制作的Flexbox风格的站点设置了HTML和CSS（也包括下面的代码片段），这里有一些关于它的信息 1-我有一个围绕网站内容的包装div，这样我可以控制背面的流程和背景 2-我为Flexbox的每一“行”设
-
问题内容： 我正在尝试编写一个分为三部分的搜索菜单。如果没有足够的垂直空间显示结果，则每个部分都会有一个滚动条。 在Chrome和Firefox中，每个菜单都显示其滚动条，但是在IE11上，菜单与包装器重叠。 我已经编写了一个可在Chrome和Firefox上运行的示例（Firefox很棘手，我需要添加多个菜单级别）。 我在IE 11上缺少什么吗？ 问题答案： 要在Chrome，Safari，Fi