如何用CSS Grid实现固定侧栏与自适应主内容区-css教程-PHP中文网

grid-template-columns: 300px 1fr本身正确，但需补全高度链路（html/body设100%、容器设min-height:100vh）、主内容加overflow-y:auto并限高、避免align-self干扰，否则1fr因无可用高度而失效。

如何用css grid实现固定侧栏与自适应主内容区

grid-template-columns: 300px 1fr 这行代码本身完全正确，但单独写它，90% 的人会发现“布局没生效”——问题不在 Grid，而在高度链路断裂、滚动未隔离、对齐被覆盖这三处。

为什么 `grid-template-columns: 300px 1fr` 常常“看起来没效果”

浏览器能准确解析这行声明，1fr 也确实代表“剩余宽度的一份”。但它不自动继承父容器高度：如果 html 或 body 是默认的 height: auto，Grid 容器高度就是 0，1fr 就失去计算依据。

典型现象包括：

主内容区域只包裹文字高度，侧边栏和主体上下错位
整个网格塌成一行，侧边栏被压扁或溢出
明明写了 300px 1fr，但主区宽度始终是 auto

必须补全高度锚定链：

html, body { height: 100%; } —— 提供根级高度来源
布局容器（如 .container）设 min-height: 100vh 或 height: 100%
Grid 容器自身也要显式设 height: 100% 或 min-height: 100%

主内容要滚动，侧边栏要固定，怎么隔离行为

Grid 列轨道天然固定位置，但默认滚动是整个容器一起动。你想要的是：侧边栏钉在左侧不动，仅主内容区垂直滚动。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

关键不是给侧边栏加 position: sticky，而是约束主内容区自身：

给主内容元素（比如 <main></main>）加 overflow-y: auto
同时必须设明确高度上限，例如 height: calc(100vh - 60px)（减去 header 高度）或 max-height: 100vh
绝对不要给 Grid 容器设 overflow，否则可能截断侧边栏或触发双滚动条
侧边栏元素本身不设 overflow，也不加 align-self/justify-self

如果主内容里有长表格或图片，记得加 min-width: 0，防止它撑大整列，间接压缩 1fr 可分空间。

`300px` 能不能换成 `minmax(240px, 300px)`？

可以，但要清楚代价：

minmax(240px, 300px) 表示该列最小 240px、最大 300px，超出部分会被压缩或换行
旧版 Safari 对嵌套 minmax() + fr 有渲染抖动，生产环境慎用
如果只是想防小屏下侧边栏过窄，更稳的做法是用媒体查询切换为单列：@media (max-width: 768px) { grid-template-columns: 1fr; }
真正影响 1fr 分配的，是它前面所有列的最终占用宽度——包括 gap、min-content 和显式尺寸