HTML5中实现网页底部固定栏有四种方法：一是CSS position:fixed使footer始终锚定视口底部；二是flexbox实现粘性底部，内容不足时贴底、足够时随内容流；三是CSS Grid划分三行轨道，底部自动居底；四是vh单位配合absolute定位实现全屏锚定。
如果您希望在网页底部创建一个始终可见的固定栏，HTML5 提供了多种方式实现 footer 的固定定位效果。以下是几种常用且兼容性良好的实现方法：
一、使用 CSS position: fixed 实现底部固定
该方法通过将 footer 元素设置为固定定位，使其脱离文档流并始终锚定在视口底部，不随页面滚动而移动。需注意避免内容被遮挡，应为 body 或主内容区域预留足够下边距。
1、在 HTML 中定义一个具有 class="fixed-footer" 的 footer 元素，置于 body 内部末尾位置。
2、在 CSS 中添加如下样式：.fixed-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background-color: #333; z-index: 1000; }
立即学习“前端免费学习笔记（深入）”；
3、为 body 设置 padding-bottom 值，大小应等于 fixed-footer 的高度，例如：body { padding-bottom: 60px; }
二、使用 flexbox 布局实现“粘性底部”（Sticky Footer）
该方案使 footer 始终位于页面内容之后，仅当内容不足一屏时才“粘”在视口底部；内容足够长时则自然跟随内容流到底部，不会遮挡正文。适用于需要语义化结构与响应式适配的场景。
1、将 body 设置为 display: flex，flex-direction: column，并设定最小高度为 100vh：body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
2、为主内容容器（如 main 或 .content）添加 flex: 1，使其占据剩余可用空间：main { flex: 1; }
3、确保 footer 不设置固定高度以外的 flex 属性，保持其自然尺寸或显式设定 height。
三、使用 CSS Grid 实现底部固定布局
利用 CSS Grid 可以精确划分页面为头部、主体与底部三个轨道，其中底部轨道始终位于视口最下方，同时支持内容自适应与对齐控制。
1、为 body 或一个外层容器设置 display: grid 和 grid-template-rows：body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; margin: 0; }
2、将 header、main、footer 按顺序作为直接子元素放入该容器中。
3、为 footer 添加对齐属性以增强视觉稳定性：footer { justify-self: stretch; }
四、使用 vh 单位配合绝对定位实现全屏底部锚定
该方法将 footer 绝对定位在父容器底部，并利用视口高度单位确保其位置不受缩放或设备差异影响。适用于需严格控制 footer 垂直位置的轻量级页面。
1、确保 footer 的父容器（如 body 或 wrapper）设置为 position: relative 且 height: 100vh。
2、为 footer 设置：footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 56px; background: #2c3e50; }
3、若父容器存在 padding 或 border，需通过 box-sizing: border-box 确保尺寸计算准确：footer { box-sizing: border-box; }
