17370845950

用 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 定义行高结构

若侧边栏需「固定像素高度」（比如头部导航），主内容填剩余空间，推荐这样写：

• grid-template-rows: 60px 1fr; → 第一行固定 60px（侧边栏/头部），第二行自动撑满
• 若侧边栏在左侧，就用 grid-template-columns: 240px 1fr;，其中 240px 是侧边栏宽度，1fr 是主内容宽度
• 注意：这里「固定」指宽度或高度值写死，不是 height: 200px 单独加在侧边栏元素上（那会破坏 Grid 的流式分配）

侧边栏自身不设 height，靠 Grid 分配控制

侧边栏元素本身一般 不要写 height，否则可能和 Grid 行高冲突。正确做法是：

• 让它自然内容高度，或用 min-height: 100% 填满分配到的高度
• 如果真要强制固定高度（比如设计要求必须 500px），可设 height: 500px，但需确保父容器足够高，否则会溢出
• 更稳妥：用 max-height + overflow-y: auto，既控高又保内容可滚动

主内容用 1fr 自动伸缩，无需额外 height

1fr 就是“剩下的所有空间”，所以主内容区域只要：

• 不设 height（避免覆盖 Grid 分配）
• 可加 overflow: auto，内容超长时内部滚动，不影响整体布局
• 如果主内容里有子元素需要 100% 高，记得祖先加 height: 100% 或用 display: contents 等技巧穿透

基本上就这些。核心就是：容器有高 → Grid 划分明确 → 固定值写在 grid-template-* 里 → 内容区域交由 1fr 管理，不手动干预 height。