
使用 CSS Grid 布局创建可滚动区域时,常常会遇到行高异常问题,例如 grid-template-rows 设置的高度只作用于第一行,其余行高度固定为 41px。
问题根源分析:
此问题通常源于字体大小、行高和内边距的累加值超过了默认行高。默认行高通常计算为:字体大小 行高 + 2 内边距。例如,字体大小 14px,行高 1.5,内边距 10px,则默认高度为 14 1.5 + 10 2 = 41px。
有效解决方案:
立即学习“前端免费学习笔记(深入)”;
以下方法可以有效解决该问题:
-
设置容器高度: 为
.items-area元素设置height: 100%,确保其占据父容器的全部高度。 -
直接设置项目高度: 直接为
.item元素设置所需高度,避免使用auto-fill自动填充行高,从而规避默认行高限制。 - 考虑 Flexbox 布局: Flexbox 布局在处理行高方面更为灵活,可以更好地控制子元素高度,不妨考虑将其作为替代方案。










