桌面端背景图全屏正常，移动端高度无法铺满问题求助

我设置了页面背景图，在桌面端可以全屏正常显示，但在移动端只能铺满宽度，高度无法铺满。对应的CSS代码如下：

body { 
  background: linear-gradient(rgba(99, 177, 242, 0.5),rgba(99, 177, 242, 0.5)), url('../images/background.png') no-repeat center center fixed; 
  height: 1px; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
}

请问有人知道这一问题的原因吗？

问题原因分析 #

兄弟，你代码里的height: 1px就是核心问题！

在移动端浏览器中，body元素的高度会严格遵循你设置的1px值——哪怕background-size: cover会让背景图尽量覆盖容器，但容器本身高度只有1px，背景图自然没法铺满整个视口高度。

为啥桌面端看起来正常？大概率是桌面端页面里有其他内容把body的高度撑起来了，或者浏览器默认样式让body自动适配了视口高度，但移动端浏览器对元素高度的计算更严格，完全按照你写的样式执行，所以就出现了宽度铺满、高度不足的情况。

解决方案 #

你需要调整body和html的高度设置，让它们能自适应视口高度，同时清除默认边距避免留白。这里有两种常用方案：

方案1：固定铺满视口（适合内容较少的页面）

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

body { 
  background: linear-gradient(rgba(99, 177, 242, 0.5),rgba(99, 177, 242, 0.5)), url('../images/background.png') no-repeat center center fixed; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
}

• 把html和body的高度都设为100%，让它们完全覆盖视口
• 去掉限制高度的height: 1px
• 清除默认的margin和padding，避免出现滚动条或留白

方案2：自适应内容高度（适合内容可能超过视口的页面）

如果页面内容可能超过视口高度，用min-height: 100%代替height: 100%，这样body会自动适应内容高度，同时至少铺满视口：

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(rgba(99, 177, 242, 0.5),rgba(99, 177, 242, 0.5)), url('../images/background.png') no-repeat center center fixed; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover; 
}

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