vh在bootstrap中“不够高”是因为.container有内边距和最大宽度限制，父级存在默认margin或滚动条占位；应优先对section等外层标签用min-height: 100vh，并重置html、body样式，避免gap与h-100冲突。

为什么vh在Bootstrap容器里经常“不够高”

因为Bootstrap的.container或.container-fluid本身有内边距、最大宽度限制，且父级（比如body）可能有默认margin或滚动条占位——100vh算的是视口高度，但元素一旦被嵌套在有padding/margin/overflow约束的容器里，视觉上就“顶不到头”。更常见的是：你写了height: 100vh，结果背景只铺满内容区，顶部留白、底部截断。

min-height: 100vh比height: 100vh更稳妥

用height: 100vh会强制拉伸，内容少时留白，内容多时溢出；而min-height: 100vh让容器至少撑满视口，内容多了就自然延伸——这才是全屏背景的真实需求。

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

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

下载

• 对Bootstrap中的.row或自定义section加min-height: 100vh，不是对.container本身
• 如果背景需要覆盖整个视口（含滚动条位置），记得在html和body上重置：

  html, body { margin: 0; padding: 0; height: 100%; }

• 移动端Safari对vh有bug（地址栏收放导致高度跳变），可配合min-height: 100%降级兜底

背景图不随容器缩放？检查background-size和background-attachment

即使高度对了，背景图常出现拉伸、居中偏移或固定不动——问题不在vh，而在背景渲染逻辑。

• 全屏背景图推荐用：background-size: cover（等比缩放填满）或background-size: 100% 100%（强制拉伸，慎用）
• 避免background-attachment: fixed：它会让背景脱离文档流，在Bootstrap响应式容器中极易错位，尤其在iOS上失效
• 如果用background-image，确保路径正确，且图片尺寸足够大（至少1920×1080），否则cover会模糊

Bootstrap 5+ 的g-*间距类会干扰高度计算

Bootstrap 5的栅格系统默认用gap控制行列间距，而gap本身不占内容高度，但如果你把min-height: 100vh加在.row上，它的子.col又设了h-100，就可能因父子盒模型叠加导致高度溢出或塌陷。

• 优先把min-height: 100vh加在最外层语义化标签（如section）上，而非.row
• 避免混用h-100工具类和自定义min-height，两者冲突时以CSS权重高的为准
• 调试时用浏览器开发者工具选中元素，看computed height是否真为预期值，别只信样式面板里的声明

实际最难调的从来不是100vh写没写对，而是它和Bootstrap的padding、gap、max-width以及移动端滚动条共存时的隐性相互作用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！