本教程将指导您如何使用css flexbox和粘性定位（`position: sticky`），构建一个拥有底部固定页脚和顶部粘性导航栏的网页布局。文章将详细解释如何通过巧妙结合`min-height: 100vh`和`margin-top: auto`，解决传统布局中粘性导航失效或页脚无法正确固定到底部的问题，确保布局在不同内容高度下都能灵活响应。
在现代网页设计中，一个常见的布局需求是拥有一个始终位于页面底部的页脚（footer），以及一个在用户滚动页面时能保持在顶部的导航栏（sticky navigation）。然而，当内容高度不足以填满整个视口时，或者内容高度超出视口时，如何优雅地实现这两种效果并避免它们之间产生冲突，是许多开发者面临的挑战。本教程将提供一个基于Flexbox和CSS粘性定位的健壮解决方案。
核心布局原理
要实现底部固定页脚和粘性导航栏，我们需要结合以下关键CSS特性：
-
Flexbox 布局 (display: flex): Flexbox 是一种一维布局模型，非常适合构建组件和小型布局。在这里，我们将使用它来将页面内容（头部、导航、主内容区、页脚）垂直堆叠，并允许主内容区根据需要扩展。
- display: flex;: 将容器变为弹性容器。
- flex-direction: column;: 使子元素垂直堆叠。
- flex: 1; (应用于主内容区): 允许主内容区占据所有可用空间，确保页脚被推到底部。
-
粘性定位 (position: sticky): position: sticky 是一种混合了相对定位和固定定位的定位方式。元素在到达指定滚动位置之前表现为相对定位，一旦到达该位置，则表现为固定定位。
- position: sticky;: 启用粘性定位。
- top: 0;: 指定元素在视口顶部达到0距离时开始“粘性”。
-
视口高度 (min-height: 100vh): 这是解决页脚固定在底部的关键。100vh 表示视口高度的100%。
-
自动外边距 (margin-top: auto): 在Flexbox容器中，当一个子元素设置了 margin-top: auto，它会尝试占据所有可用的垂直空间，将其自身推离上方的兄弟元素。
- margin-top: auto; (应用于页脚): 将页脚推到容器的底部，利用了主内容区 flex: 1 占据剩余空间后，Flexbox剩余空间的分配机制。
实现步骤与代码示例
我们将通过一个具体的HTML结构和CSS样式来演示这一布局。
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
首先，定义一个包含头部、导航、主内容区和页脚的根容器。
底部页脚与粘性导航栏布局
Header
内容块 1 (短内容示例)
内容块 2 (长内容示例)
内容块 3
CSS 样式：
接下来是关键的CSS样式，它们将实现我们期望的布局行为。
/* 重置浏览器默认样式，确保布局从零开始 */
html,
body {
height: 100%; /* 确保html和body占据整个视口高度，为后续布局提供一致的基础 */
margin: 0; /* 移除默认的外边距 */
padding: 0; /* 移除默认的内边距 */
}
/* 根容器：Flexbox布局，最小高度为视口 
