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 更直观。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 父容器设：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 地址栏）或用 visualViewport API（Chrome 61+）
• 简单兜底写法：document.documentElement.style.height = `${window.visualViewport?.height || window.innerHeight}px`;
• 每次设置后记得 scrollTo(0, 0)，防止 iOS 触发意外滚动偏移

实际最难搞的是混合场景：比如 modal 内部内容短，但 modal 自身高度由 JS 控制，又叠加了 transform 动画。这时候 CSS 的 min-height 和 flex 往往被 transform 层级压制，得靠 contain: layout 或临时改 display 触发重排。