height: 100vh 在内容极短时留白难看是因为它基于视口高度而非内容高度，导致容器未被撑满；应优先用 min-height: 100vh 或 flex/grid 布局实现自适应填充。
height: 100vh 在内容极短时为何留白难看
因为 vh 单位基于视口高度，不是内容高度；当内容远小于 100vh，容器撑不满，底部就空着——这不是 bug，是 CSS 的正常行为。常见于登录页、空状态页、弹窗内嵌内容等场景。
- 浏览器默认 body 有
margin，会额外加白边，先清掉：body { margin: 0; } -
min-height: 100vh比height: 100vh更合理：它允许内容撑高，又保证不矮于一屏 - 若父容器没设高度（比如
div套在body里），100vh仍生效，但子元素用100%就失效——百分比高度依赖父级显式高度
flex 布局让短内容“撑满+居中”最稳
不用算高度、不依赖 JS、兼容性好（IE11+），适合大多数单页主体布局。
- 给根容器（如
body或外层div）加：display: flex; flex-direction: column; - 主体内容区加：
flex: 1;—— 它会吃掉剩余空间，哪怕内容只有 2 行文字 - 想垂直居中？把
flex: 1换成margin: auto;，或对父容器加justify-content: center; - 注意：如果内容本身有
margin-bottom，可能被误判为“已占位”，导致撑不满，建议用padding替代
grid 布局处理多区域留白更精细
当你不止一个区块（比如 header + main + footer），且希望 main 区域强制占满剩余高度，grid 比 flex 更直观。
- 父容器设：
display: grid; grid-template-rows: auto 1fr auto;——1fr会填满剩余空间 - header/footer 高度由内容决定，main 自动拉伸，不怕内容短
- 避免对
main单独设min-height: 100vh，否则会和 grid 冲突，出现双倍高度滚动条 - 旧版 Safari 对
1fr在 min-content 场景下有渲染偏差，可加min-height: 0;到 main 的直接父容器上兜底
JavaScript 补救只在必要时用
纯 CSS 搞不定再考虑 JS，比如需要动态适配「键盘弹起」（移动端）或「浏览器地址栏隐藏/显示」导致的视口变化。
- 别用
window.innerHeight直接设style.height，它不响应视口缩放或地址栏切换 - 推荐监听
resize事件 +matchMedia（针对 iOS Safari 地址栏）或用visualViewportAPI（Chrome 61+） - 简单兜底写法：
document.documentElement.style.height = `${window.visualViewport?.height || window.innerHeight}px`; - 每次设置后记得
scrollTo(0, 0)，防止 iOS 触发意外滚动偏移
min-height 和 flex 往往被 transform 层级压制，得靠 contain: layout 或临时改 display 触发重排。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
