使用background-size:cover时页面底部留白的解决方法咨询

嘿，这个问题我太熟悉了！其实就是浏览器默认样式和元素高度设置的小坑，咱们一步步来搞定它：

核心原因 #

浏览器默认会给body添加几像素的外边距，而且body的高度默认是由内部内容撑开的——如果页面没什么内容，它就不会自动占满整个视口高度，这就导致背景图虽然用了cover，但底部还是会露出留白。

解决方案一：适配无内容/内容少的页面 #

直接给html和body设置满高，同时重置默认边距：

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

body {
  background-image:url("maxresdefault.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position: center center; /* 可选：让图片居中显示，优化视觉效果 */
}

• html, body { height: 100%; }：让body继承html的视口高度，确保它能撑满整个屏幕
• margin: 0; padding: 0;：去掉浏览器给body加的默认边距，避免出现不必要的留白或滚动条
• background-position: center center：可选优化，让背景图在任何屏幕尺寸下都居中，不会因为拉伸出现偏移

解决方案二：适配内容超过视口的页面 #

如果你的页面内容会超过屏幕高度，不想背景图被截断，而是跟着页面延伸的话，可以用min-height: 100vh替代height:100%：

html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  background-image:url("maxresdefault.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position: center center;
  background-attachment: fixed; /* 可选：让背景图固定，滚动内容时背景不动 */
}

• min-height:100vh：vh是视口高度单位，100vh就是整个屏幕的高度，min-height保证body至少占满视口，内容多的时候会自动向下延伸
• background-attachment: fixed：可选设置，想要背景图固定不随内容滚动的话可以加上

这两个方案基本能解决99%的底部留白问题，你可以根据自己的页面内容情况选一个就行～

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