应使用 Flex 或 Grid 布局替代 position: fixed 实现全页固定头尾，因其避免 iOS Safari 滚动跳变、不破坏可访问性、无需 z-index 且兼容性更好；Flex 方案需设 body 为 column flex、min-height: 100vh、main flex: 1；Grid 方案用 grid-template-rows: auto 1fr auto 更简洁。
别用 position: fixed 做全页头部+页脚固定——它会在 iOS Safari 滚动时跳变、遮挡内容、破坏可访问性，新手一上手就踩坑。
为什么 Flex 布局比 position: fixed 更适合新手
Flex 方案不依赖 z-index、不干扰滚动流、不强制脱离文档流，header 和 footer 保持自然尺寸，main 自动吃掉剩余空间。真正“写一次，跑全端”，连 iOS 14.5+ 的 vh 跳变问题都绕开了。
-
body设min-height: 100vh（不是height: 100vh），否则短内容页会被拉伸溢出 -
main必须写flex: 1，否则 footer 不会沉底，而是紧贴 main 内容末尾 -
header和footer别设height固定值，让它们随内容自适应；如需控制高度，用padding或line-height - IE11 对
flex: 1支持不稳定，若必须兼容，可改用margin-top: auto加在footer上
直接可用的 HTML + CSS 基础模板
复制粘贴就能跑，无需额外 class 或 JS：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>固定头尾布局</title>
<style>
html, body { margin: 0; }
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
flex-shrink: 0;
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
main {
flex: 1;
overflow-y: auto;
padding: 1rem;
}
</style>
</head>
<body>
<header><h2>网站头部</h2></header>
<main><p>这里是主体内容……</p></main>
<footer><p>© 2026 版权所有</p></footer>
</body>
</html>
注意：main 的 overflow-y: auto 是关键——它让长内容可滚动，同时不撑开 footer；没有它，滚动条会出现在整个视口，导致 header/footer 被一起拖动。
立即学习“前端免费学习笔记（深入）”；
Grid 方案：语义更清晰，代码更少
如果你用的是现代项目（Chrome 85+/Safari 14.5+/Firefox 79+），grid 是更干净的选择，三行定义即完成布局：
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}
footer {
justify-self: stretch;
}
和 Flex 方案一样，auto 行高会自适应 header/footer 内容，1fr 确保中间区域占满剩余空间。唯一要注意的是：footer 默认不会铺满整行，必须加 justify-self: stretch。
语义化标签不能乱嵌套
header 和 footer 是整页级结构，不能塞进 main 里；main 全局只能出现一次，且不能被 header/nav/footer 包裹。
- 错误写法：
<main><header>…</header></main>—— 屏幕阅读器会误判为“主内容包含页头” - 正确结构：
<header></header><main></main><footer></footer>，平级并列 -
nav只包导航链接，页脚里的“隐私政策”不用放进nav；多个导航区可以有多个nav，但每个都得有明确用途
最易被忽略的一点：header 和 footer 里如果放标题（比如 <h1>），要确保层级合理——整页只有一个 <h1>，其他用 <h2> 或更低，否则影响 SEO 和辅助技术解析。
