页脚导航不能直接用width: 100%是因为浏览器默认body有margin且父容器可能带padding或限宽，导致留白；真正全宽需用position: relative + width: 100vw配合left: 50%和transform: translatex(-50%)居中防偏移，并清除body默认margin。
页脚导航为什么不能直接用 width: 100%？
因为浏览器默认 body 有 margin，而且很多重置样式没清掉 html 或 body 的 padding，导致即使设了 width: 100%，页脚仍留白或错位。更关键的是，100% 是相对于父容器计算的——如果父容器（比如 main 或 .container）本身带左右内边距或限制宽度，页脚就永远铺不满。
真正全宽的页脚必须脱离常规布局流
最可靠的方式是让页脚使用 position: absolute 或 position: fixed，但要注意：绝对定位需配合 bottom: 0 和父容器 position: relative；固定定位会悬浮在视口底部，可能遮挡内容。实际项目中更推荐 position: relative + width: 100vw，再用 left: 50% + transform: translateX(-50%) 居中防偏移：
<footer style="position: relative; width: 100vw; left: 50%; transform: translateX(-50%); margin: 0; padding: 1rem 2rem;"><nav><a href="#home">首页</a>
<a href="#about">关于</a>
<a href="#contact">联系</a>
</nav></footer>
-
100vw是视口宽度，不受父容器限制 -
left: 50%+transform: translateX(-50%)避免因body滚动条宽度导致的轻微右偏 - 务必清除
body的默认margin，否则顶部/底部仍可能有空隙
用 Flex 布局排导航链接时别忽略换行和断点
全宽页脚里放一堆链接，小屏上容易挤成一行溢出或折成多行错乱。别只写 display: flex 就完事：
- 加
flex-wrap: wrap允许换行 - 给
a标签设flex: 1 1 auto，再配合min-width: 120px防止过窄 - 移动端用
@media (max-width: 768px)把justify-content改成center，避免左对齐后右边大片空白 - 注意
text-align: center在块级元素上才生效，Flex 容器里得靠justify-content
JavaScript 动态计算宽度反而增加出错风险
有人用 window.innerWidth + resize 事件手动设置页脚宽度，这没必要。CSS 的 vw 单位原生响应视口变化，且无 JS 执行延迟、不触发重排。唯一要留意的是 Safari 对 vw 在地址栏展开/收起时的短暂偏差，但现代版本已基本修复。除非你要做滚动吸附（sticky footer），否则纯 CSS 更稳。
真正容易被忽略的是：如果页面内容高度不足一屏，页脚会卡在中间而不是贴底——这时得用 min-height: 100vh 给 body 或包裹容器，再配合 display: flex; flex-direction: column 和 margin-top: auto 推页脚到底部。这个逻辑和“全宽”无关，但常被一起误配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
