如何使用CSS Grid创建一个固定侧边栏的后台管理界面？-css教程-PHP中文网

直接用 grid-template-columns: 240px 1fr 实现固定侧边栏需同时满足三条件：父容器高度锚定（html/body height: 100%，grid 容器 min-height: 100vh）、主内容区域独立滚动（overflow-y: auto + 明确高度上限）、小屏下真正移出布局流（display: none 而非 visibility: hidden）。

如何使用css grid创建一个固定侧边栏的后台管理界面？

直接用 grid-template-columns: 240px 1fr 就能实现固定侧边栏，但光写这一行几乎必然失效——问题不在 Grid 语法，而在高度锚定、滚动隔离和对齐行为这三处缺失。

为什么 `grid-template-columns: 240px 1fr` 看起来没生效

浏览器完全理解这个声明，1fr 是“剩余可用空间的一份”，但它不自动继承父容器高度。如果父容器（比如 body 或布局根容器）高度是 auto（默认值），1fr 在垂直方向就失去计算依据。

html, body 必须设 height: 100%
Grid 容器自身要设 min-height: 100vh 或 height: 100%
避免给主内容区域加 align-self: start 或 justify-self: start，它会主动放弃占满轨道

侧边栏固定但主内容要独立滚动

Grid 列轨道天然固定位置，但滚动行为不会自动分离。默认是整个 Grid 容器一起滚动，这不是你想要的。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给主内容元素（如 <main></main>）设 overflow-y: auto
必须同步给它一个明确高度上限，例如 height: calc(100vh - 60px)（减去 header 高度）或 max-height: 100vh
绝对不要给 Grid 容器设 overflow，否则可能截断侧边栏或触发双滚动条
侧边栏本身不设 overflow，也不用 position: sticky——Grid 已负责定位

小屏下隐藏侧边栏的正确写法

只改 grid-template-columns 不够，DOM 还在网格里占位，侧边栏可能被挤进第一列、撑高容器或遮挡内容。

在 @media (max-width: 767px) 中，除了写 grid-template-columns: 1fr，还必须加 .sidebar { display: none; }
别用 visibility: hidden，它仍占位；display: none 才真正移出布局流
如果侧边栏需要抽屉式滑出，改用 transform: translateX(-100%) + position: fixed，并确保 z-index 足够高
用 DevTools 的 “Computed” 面板确认生效的 grid-template-columns 确实是 1fr，而不是被更具体的选择器覆盖