粘性页脚与侧边栏布局
使用 Grid 或 Flexbox 构建带有粘性页脚和侧边栏的全高度布局。
粘性页脚与侧边栏布局 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
粘性页脚问题
当内容较短时，粘性页脚会停留在视口底部；当内容较长时，它会随着内容向下移动。历史上的难题是：在不知道内容高度且不使用 JavaScript 的情况下，让页脚保持在底部。
弹性盒粘性页脚
最简单的现代方案是：body { display: flex; flex-direction: column; min-height: 100vh; } 和 main { flex: 1; }。主要内容会扩展以填满可用空间，无论内容长度如何，都会将页脚推到页面底部。
网格粘性页脚
CSS 网格的替代方案是：body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }。标题栏的高度为自动，主要内容占用 1fr（填满剩余空间），页脚的高度为自动。布局简洁明确——行模板清楚地展示了布局意图。
position: sticky 页脚
在页脚上设置 position: sticky; bottom: 0，滚动时可以使页脚吸附在视口底部，但前提是其滚动上下文允许这样做。它适用于滚动容器内的页脚；对于页面级粘性页脚，弹性盒或网格布局通常更合适、更简洁。
使用弹性盒布局的侧边栏
侧边栏加主要内容的布局可以这样设置：wrapper { display: flex; }、sidebar { width: 280px; flex-shrink: 0; }、main { flex: 1; min-width: 0; }。在主要内容上设置 min-width: 0，可以防止弹性项目包含宽内容时溢出其容器。
使用网格布局的侧边栏
网格侧边栏可以这样设置：wrapper { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-4); }。侧边栏列的宽度固定，内容列会填满剩余空间。添加标题栏行：使用 grid-template-rows: auto 1fr，并让侧边栏跨越两行。
响应式侧边栏
在移动设备上，可以将侧边栏折叠到主要内容的上方或下方：使用媒体查询，将网格列布局切换为单列堆叠布局。也可以使用 grid-template-columns: min(280px, 30%) 1fr，让侧边栏在较小的视口中流式缩窄。
粘性侧边栏
可以让侧边栏独立滚动：sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }。主内容滚动时，侧边栏会保持在视口中，非常适合长篇内容页面中的导航栏或目录侧边栏。
可折叠侧边栏
可折叠侧边栏可以在全宽状态和仅显示图标的状态之间切换。在包装器上使用 CSS 自定义属性设置侧边栏宽度：--sidebar-width: 280px，再通过一个类切换为 64px。过渡效果可以平滑地表现宽度变化。
固定侧边栏中的溢出
固定定位的侧边栏（position: fixed; left: 0; top: 0; height: 100vh）需要按照侧边栏宽度给主要内容添加偏移：main { margin-left: 280px }。在移动设备上，侧边栏会覆盖在内容上方，并配有关闭按钮和背景遮罩。
侧边栏的可访问性
使用 <nav> 和 aria-label="Sidebar navigation" 标记导航侧边栏。可折叠侧边栏需要带有 aria-expanded 和 aria-controls 的可访问切换按钮。跳转链接可以帮助键盘用户跳过侧边栏，直接到达主要内容。
知识检查
为什么需要在侧边栏布局的主要内容弹性项目上设置 min-width: 0？
总结
在主要内容上使用 flex: 1 的弹性盒布局，或使用三行网格布局，都可以用极少的 CSS 实现整洁的粘性页脚。侧边栏布局使用固定或流式的列定义，并通过响应式断点在移动设备上折叠。粘性侧边栏、可折叠宽度以及可访问的 ARIA 属性，共同构成适用于生产环境的侧边栏和页脚模式。
常见问题解答
「粘性页脚与侧边栏布局」课时是免费的吗？
是的 — 「粘性页脚与侧边栏布局」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「粘性页脚与侧边栏布局」这节课中我会学到什么？
使用 Grid 或 Flexbox 构建带有粘性页脚和侧边栏的全高度布局。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「粘性页脚与侧边栏布局」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。