用 CSS Grid 实现侧边栏固定宽高、主内容自动填充剩余空间，关键是父容器设明确高度（如 height: 100vh），用 grid-template-columns 或 rows 定义固定值与 1fr，侧边栏自身不设 height，主内容依赖 1fr 自适应。
侧边栏固定高度、主内容自动填充剩余空间，用 CSS Grid 实现很直接——关键是把容器设为 grid，用 1fr 让主区域“撑满”，侧边栏用固定值（如 300px）或 fit-content + 固定 height 控制，同时确保父容器有明确高度来源（比如视口高或显式 height）。
Grid 的 1fr 是按可用空间分配的，如果父容器没高度，1fr 就没意义。最常用的是让容器占满视口：
height: 100vh; —— 简单可靠，适合全屏布局min-height: 100vh; —— 更灵活，内容超长时可滚动height，比如 height: 800px;
若侧边栏需「固定像素高度」（比如头部导航），主内容填剩余空间，推荐这样写：
grid-template-rows: 60px 1fr; → 第一行固定 60px（侧边栏/头部），第二行自动撑满grid-template-columns: 240px 1fr;，其中 240px 是侧边栏宽度，1fr 是主内容宽度height: 200px 单独加在侧边栏元素上（那会破坏 Grid 的流式分配）侧边栏元素本身一般 不要写 height，否则可能和 Grid 行高冲突。正确做法是：
min-height: 100% 填满分配到的高度height: 500px，但需确保父容器足够高，否则会溢出max-height + overflow-y: auto，既控高又保内容可滚动1fr 就是“剩下的所有空间”，所以主内容区域只要：
height（避免覆盖 Grid 分配）overflow: auto，内容超长时内部滚动，不影响整体布局height: 100% 或用 display: contents 等技巧穿透基本上就这些。核心就是：容器有高 → Grid 划分明确 → 固定值写在 grid-template-* 里 → 内容区域交由 1fr 管理，不手动干预 height。
以上就是Grid网格布局如何让侧边栏固定高度_使用固定数值结合auto控制主内容的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
327
收藏
取消收藏
