应使用 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：
<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><header><h2>网站头部</h2></header><main><p>这里是主体内容……</p></main><footer><p>© 2026 版权所有</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></footer>
注意：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>），要确保层级合理——整页只有一个 <h1></h1>，其他用 <h2></h2> 或更低，否则影响 SEO 和辅助技术解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
