页面底部留白的根本原因是布局机制未对齐，需同时设置 html 和 body 的 margin: 0，并确保 min-height: 100vh 作用于 body；使用 flex 布局时应设 body 为 column flex 容器，main 设 flex: 1，且避免内部元素限高或触发最小高度干扰。
页面底部留白不是“没撑满”，而是布局机制没对齐——直接加 height: 100vh 或清 margin 很可能无效，甚至掩盖真实问题。
为什么 min-height: 100vh 加了还是留白？
根本原因常被忽略：body 没设 margin: 0，或父级（html）未参与高度继承链。浏览器默认给 body 留 8px 外边距，哪怕你写了 min-height: 100vh，这个 margin 也会把 footer 推离视口底边。
-
html和body必须同时设margin: 0；单写body { margin: 0 }不够，因为html的 margin 会透传 -
min-height: 100vh要加在body上，不是只加在某个.container；否则容器再高，body本身仍可能塌缩 - 若用了
display: flex或display: grid布局，min-height必须作用于该 flex/grid 容器的直接父级（通常是body），否则子项的flex: 1或1fr无空间可占
footer 悬空不沉底？检查是否漏了定位上下文
用 position: absolute; bottom: 0 时，footer 会相对于最近的「已定位祖先」计算位置。如果 body 没设 position: relative，它就可能锚定到 html 或视口，导致错位。
- 必须写
body { position: relative }，这是footer { position: absolute; bottom: 0 }正常工作的前提 -
footer需显式加width: 100%；否则在某些滚动场景下（如出现垂直滚动条），宽度可能收缩，右侧露白 - 更推荐用
display: flex替代绝对定位：body { display: flex; flex-direction: column; min-height: 100vh }+main { flex: 1 }，天然规避定位上下文问题
Flex 布局中 main 不吃剩余空间？看 flex-shrink 是否被干扰
flex: 1 实际是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写。但若 main 内部有内容设置了固定高度（比如 height: 500px），或父容器有 overflow: hidden，flex-grow 就会被压制，无法拉伸。
- 确保
main没被其他 CSS 强制限高（如max-height、height、overflow: hidden） - 检查是否有子元素触发了最小高度限制（例如
img默认vertical-align: baseline，会在下方留几像素缝隙，累积后影响整体高度计算） - IE11 对
flex: 1支持不稳定，兼容场景建议改用margin-top: auto加在footer上
大屏下底部“泛白”？这不是留白，是栅格密度失衡
当屏幕宽度超过 2560px，12 列栅格每列仅约 213px，固定 gap: 1.5rem 占比变小，视觉上变成“全是空”。这时加 min-height 无意义，要调整布局密度。
- 阶梯式增加列数：
@media (min-width: 1440px) { grid-template-columns: repeat(16, 1fr); } - 同步缩小
gap：gap: clamp(0.75rem, 1vw, 1rem)，避免列间松散 - 禁用固定
font-size: 16px；用font-size: clamp(1rem, 2.5vw, 1.25rem)让文字随屏放大，填满视觉空白
真正难排查的，是多个因素叠加：比如 body 有默认 margin、main 里一张图片带 baseline 缝隙、又套了一层未设 display: flow-root 的浮动容器——三处各贡献 4px，底部就多出 12px 留白。别只盯着一个地方调，得用 DevTools 逐层检查 height 和 offsetTop。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
