Flexbox 列中的百分比高度问题
在 Flexbox 布局中,通常希望 Flexbox 列的子项填充其高度。然而,用户可能会遇到将高度设置为百分比却无法得到预期结果的问题。
说明
根据 Flexbox 规范,元素的跨尺寸属性(在本例中为高度)使用指定值和使用值。百分比高度是根据父项的指定高度计算的,而不是根据使用的高度。
解决方案
要在 Chrome 中解决此问题:
示例:
.flexbox { position: absolute; background: black; width: 100%; height: 100%; display: flex; flex-direction: column; } .flex { background: blue; flex: 1; display: flex; /* Added */ } .flex-child { background: red; width: 100%; /* Removed height: 100%; */ display: block; }
部分填充的替代方法
如果只需要填充父容器的一部分,可以添加一个额外的 Flex 子容器 (.spacer) 来占用剩余空间。
.flex-child { flex: 9; } .spacer { flex: 1; }
结论
通过了解指定值和使用值之间的差异,开发人员可以克服 Flexbox 列中的百分比高度问题。尽管在某些情况下可能需要特定于浏览器的解决方法,但预计规范更新将在未来解决这些限制。
以上是为什么百分比高度在 Flexbox 列中不能按预期工作?的详细内容。更多信息请关注PHP中文网其他相关文章!