在另一个flex容器内的Flexbox列容器在Chrome中没有得到100%的高度,但在Firefox和Edge中都可以。
Codepen示例
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
}
父元素
height:100%
一旦你把它添加进去,布局在Chrome中也能工作。
header {
min-height: 100%;
width: 100%;
height: 100%; /* NEW */
}
修订代码本
问题内容: 我在flexbox列上遇到了麻烦,因为flex’d元素的子元素无法以百分比响应。我仅在Chrome浏览器中进行了检查,据我了解,这只是Chrome浏览器的问题。这是我的示例: HTML CSS 我想要它,以便红色填充蓝色。为什么不起作用? 问题答案: TL; DR: 设置为,并摆脱on 。[您可以在此处查看修改后的CodePen。] 工作原理: 我从这个类似的问题中学到,根据flexb
问题内容: 对于任何CSS专家来说,我都有一个棘手的问题。我的绿色div的高度灵活,可以容纳剩余的高度。现在我想在该div中放置一个div,该div应该是绿色div的一半。但似乎Chrome是否将其视为整个页面的一半而不是flex项目。 HTML CSS 问题答案: 您可以绝对定位。 关于您的声明: 但似乎Chrome是否将其视为整个页面的一半而不是flex项目。 您给了。然后给它的孩子()一个。
问题内容: 使用twitter bootstrap(2),我有一个带有导航栏的简单页面,并且我想在其中添加100%高度的div(到屏幕底部)。我的css- fu生锈了,我无法解决。 简单的HTML: 当前的CSS: 编辑* 我将高度添加到填充类,如下所示。但是,问题是我在主体上添加了padding-top以解决顶部的固定导航栏。这会影响“地图” div的100%高度,并意味着添加了滚动条 问题答案
问题内容: 我有一个简单的2列布局,我想使用Flexbox获得相等的高度: 的HTML 的CSS 这适用于Firefox,但不适用于Chrome: 我尝试了一些方法(包括供应商前缀),但仍然无法正常工作。 问题答案: 要使用Flexbox创建两个相等的列: 父容器得到 每列都是由div创建的,它们可以增长/收缩 拉伸第一列的子级: 还提供了第一列,以便其子元素具有柔韧性并可以成长 旁边的孩子被给予
编辑* 我已经按照下面的建议将height添加到fill类中。但是,问题是,我添加了一个padding-top到身体,以说明固定的navbar在顶部。这会影响“map”div的100%高度,并意味着会添加滚动条--如下面所示:http://jsfidle.net/s3gvf/2/有人能告诉我如何修复吗?
我已经读了几篇flexbox教程,但我仍然无法使这个简单的任务发挥作用。 我怎样才能使红框达到100%的宽度? 代码: 样式: 谢谢! 更新1:Nishanth Shankar的建议,为包装器添加flex:1,flexDirection:'row' 输出: 代码: