使用 CSS Grid 布局创建可滚动区域时，常常会遇到行高异常问题，例如 grid-template-rows 设置的高度只作用于第一行，其余行高度固定为 41px。
问题根源分析：
此问题通常源于字体大小、行高和内边距的累加值超过了默认行高。默认行高通常计算为：字体大小 行高 + 2 内边距。例如，字体大小 14px，行高 1.5，内边距 10px，则默认高度为 14 1.5 + 10 2 = 41px。
有效解决方案：
立即学习“前端免费学习笔记（深入）”；
以下方法可以有效解决该问题：
.items-area 元素设置 height: 100%，确保其占据父容器的全部高度。.item 元素设置所需高度，避免使用 auto-fill 自动填充行高，从而规避默认行高限制。以上就是CSS Grid 布局中，如何解决行高导致滚动区域显示异常的问题？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
403
收藏
