Chrome / Safari无法填充Flex父级的100%高度
我想要一个具有特定高度的垂直菜单。
每个孩子都必须填满父母的身高,并且中间对齐文本。
孩子的数量是随机的,因此我必须使用动态值。
Div .container
包含随机数的子代(.item
),子代总是必须填充父代的高度。为此,我使用了flexbox。
为了使文本居中对齐,我使用了display: table-cell
技巧。但是使用表格显示需要使用高度100%。
我的问题是.item-inner { height: 100% }
无法在webkit(Chrome)中使用。
- 有解决此问题的方法吗?
- 还是有一种不同的技术可以使所有
.item
文本的高度都垂直于中间对齐,从而全部填充父级的高度?
此处的示例jsFiddle,应在Firefox和Chrome中查看
.container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
}
.item {
flex: 1;
border-bottom: 1px solid white;
}
.item-inner {
height: 100%;
width: 100%;
display: table;
}
a {
background: orange;
display: table-cell;
vertical-align: middle;
}
<div class="container">
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
<div class="item">
<div class="item-inner">
<a>Button</a>
</div>
</div>
</div>
我有一个类似的错误,但是使用的是固定高度而不是百分比。它也是体内的弹性容器(没有指定高度)。似乎在Safari上,由于某种原因,我的flex容器的高度为9px,但在所有其他浏览器中,它都显示了样式表中指定的正确100px高度。
通过将
height
和min-height
属性都添加到CSS类,我设法使其正常工作。以下内容适用于Safari 13.0.4和Chrome 79.0.3945.130:
希望这可以帮助!
对于Mobile Safari,有一个浏览器修复程序。您需要为iOS设备添加-webkit-box。
例如
如果您将
align-items: stretch;
属性用于父元素,请height : 100%
从子元素中删除。我在iOS 8、9和10中遇到过类似的问题,上面的信息无法解决,但是经过一天的努力,我确实找到了解决方案。当然,它不适用于所有人,但在我的情况下,我的物品堆放在一列中,当它应为内容高度时,其高度为0。将CSS切换为行换行可解决此问题。仅当您只有一个项目并且将它们堆叠在一起时,此方法才有效,但是由于花了我一天的时间才能找出答案,所以我认为我应该分享自己的解决方案!
为容器指定flex属性对我有用:
这样可以确保高度已设置且不会增大。
解决方案:删除
height: 100%
在.item-内,并添加display: flex
在.item演示:https : //codepen.io/tronghiep92/pen/NvzVoo
你的回答