解决<main>元素与background-image对齐及视口留白问题

核心问题分析 #

用background-size: cover仍出现空白，大多是因为元素高度未适配视口，或是背景的定位、附着规则没匹配布局需求。当视口缩小时，若<main>的高度没跟着视口调整，背景图经cover缩放后没法填满元素，就会出现空白区域。

具体修复方案 #

1. 让根元素与
   高度适配视口
   先给html和body设置基础高度，避免默认布局导致的高度不足：

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

再给<main>设置最小高度为视口高度，确保它始终覆盖视口：

main {
  min-height: 100vh; /* 替代固定height，适配所有视口尺寸 */
  background-image: url('你的背景图路径');
  background-size: cover;
  background-position: center center; /* 确保背景图始终居中，缩放时保留核心内容 */
  background-attachment: fixed; /* 可选：固定背景，滚动时不跟随，强化视觉一致性 */
}

2. 消除内边距/外边距冲突
   检查<main>是否有默认的padding或margin，导致元素和视口边缘出现间隙：

main {
  margin: 0;
  padding: 0;
}

3. 清理干扰性媒体查询
   如果之前的媒体查询错误限制了背景属性，直接删除或调整：

比如避免在小视口下给<main>设置固定高度，改用min-height: 100vh实现自适应。

效果验证 #

修改完成后缩小视口，<main>会始终覆盖视口高度，background-size: cover配合background-position: center会让背景图自动缩放并居中，不会再出现空白区域。

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