移动端背景图片无法占满100%高度的技术求助

以下是针对移动端背景图片显示空白、无法铺满全屏问题的修复方案：

核心问题分析 #

你设置的height:100%未生效，本质是百分比高度依赖父级元素的明确高度定义。如果section.main的父元素（比如body、html）没有设置高度，100%就没有参照基准，自然无法撑满视口。

具体修复代码 #

替换你现有的移动端样式，加入根元素高度设置和完整的背景属性：

/* 先确保根元素占满视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

@media (max-width: 600px) {
  section.main {
    /* 用min-height:100vh确保元素至少占满视口高度，比100%更可靠 */
    min-height: 100vh;
    background: url("https://anchor.hecker40.repl.co/bg.jpg") no-repeat center center / cover;
    /* 可选：如果有内边距导致元素高度溢出，加入box-sizing:border-box */
    box-sizing: border-box;
  }
}

关键属性说明 #

• min-height:100vh：vh是视口高度单位，100vh等于当前设备视口的全部高度，无需依赖父元素高度，直接适配屏幕。
• background: ... no-repeat center center / cover：
  • no-repeat：避免图片重复显示
  • center center：让图片在元素内居中对齐
  • cover：让图片等比例缩放，完全覆盖元素区域，不会出现空白

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