Flexbox布局中100%高度失效的根本原因及对策有哪些？
- 内容介绍
- 相关推荐
本文共计593个文字，预计阅读时间需要3分钟。
相关专题内容，请提供具体要求或主题，以便进行简写。
在 flex 容器中设置子元素 `height: 100%` 时常无法填满父容器，主因是默认行内级图像（``）存在基线对齐（baseline alignment）导致的隐式底部间隙，进而破坏高度继承链；添加 `vertical-align: top` 可彻底解决该问题。
当使用 Flex 布局构建响应式图文区块（如 .features）时，开发者常期望 .features-img-container 及其内部 <img> 元素严格撑满父容器高度。但即使为容器设置了 height: 100%、为图片设置了 height: 100% 和 object-fit: cover，实际渲染中仍可能出现高度不一致（例如容器高 189px，图片仅 185px），根本原因在于：<img> 是原生行内级（inline）元素，其默认 vertical-align: baseline 会在元素下方保留约 4px 的空白间隙（用于容纳字母如 g、y 的下伸部分），该间隙虽不可见，却会参与行盒（line box）高度计算，导致父容器高度被“撑高”，而图片自身因基线对齐并未真正拉伸至容器顶部到底部的全部空间。
本文共计593个文字，预计阅读时间需要3分钟。
相关专题内容，请提供具体要求或主题，以便进行简写。
在 flex 容器中设置子元素 `height: 100%` 时常无法填满父容器，主因是默认行内级图像（``）存在基线对齐（baseline alignment）导致的隐式底部间隙，进而破坏高度继承链；添加 `vertical-align: top` 可彻底解决该问题。
当使用 Flex 布局构建响应式图文区块（如 .features）时，开发者常期望 .features-img-container 及其内部 <img> 元素严格撑满父容器高度。但即使为容器设置了 height: 100%、为图片设置了 height: 100% 和 object-fit: cover，实际渲染中仍可能出现高度不一致（例如容器高 189px，图片仅 185px），根本原因在于：<img> 是原生行内级（inline）元素，其默认 vertical-align: baseline 会在元素下方保留约 4px 的空白间隙（用于容纳字母如 g、y 的下伸部分），该间隙虽不可见，却会参与行盒（line box）高度计算，导致父容器高度被“撑高”，而图片自身因基线对齐并未真正拉伸至容器顶部到底部的全部空间。