如何用CSS/Bootstrap让div背景色铺满浏览器高度且不破坏移动端视图？

我来帮你搞定这个困扰！你想要让半透明遮罩层完全覆盖浏览器视口高度，盖住body的背景图，但用height:100%或100vh都出现了移动端变形的问题——这其实是因为视口高度在移动端的动态变化（比如地址栏显示/隐藏）以及CSS高度继承的逻辑问题导致的。咱们用下面的方案来兼顾两端：

核心思路 #

1. 让html和body的高度能正确支撑子元素，确保内容不足时铺满视口，内容过多时自动扩展
2. 给遮罩层设置min-height:100vh替代固定的height:100%，同时配合合理的定位逻辑

修改后的关键CSS代码 #

/* 调整html和body的基础样式 */
html {
  height: 100%;
}
body {
  padding: 0px;
  margin: 0px;
  background-image: url(../portfolio/images/bg-img1.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* 可选：让背景图固定，不随滚动移动 */
  min-height: 100vh; /* 确保body高度至少等于视口，内容超时时自动延伸 */
}

/* 修改遮罩层样式 */
.container-shader{ 
  background-color: rgba(54,54,56,0.8); 
  width: 100%;
  min-height: 100vh; /* 关键：至少覆盖视口高度，内容超过时自动扩展 */
  /* 移除原有的height:100%和margin:0 auto，避免继承问题 */
}

为什么这样有效？ #

• html: height:100% 让根元素能传递高度给body，解决高度继承的断层问题
• body: min-height:100vh 保证body高度不会小于当前视口，同时当页面内容超过视口时，body会自动拉长高度
• .container-shader: min-height:100vh 确保遮罩层至少铺满视口，当body因为内容变长时，遮罩层也会跟着延伸，完全盖住背景图
• 移动端地址栏的动态变化不会影响布局，因为vh是基于当前实时视口高度计算的，min-height会自动适配变化后的视口

备选方案（遮罩层固定不滚动） #

如果你希望遮罩层固定在视口，不随页面滚动移动（适合背景图固定的场景），可以用固定定位：

.container-shader{ 
  background-color: rgba(54,54,56,0.8); 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 固定覆盖当前视口 */
}

验证你的viewport设置 #

你的HTML里已经正确设置了viewport meta标签，这是移动端布局正常的基础，保持即可：

<meta name="viewport" content="width=device-width, initial-scale=1">

内容的提问来源于stack exchange，提问作者Jake U