登录页面背景图片占满屏幕仍显垂直滚动条的问题及解决

我写了登录页面的HTML代码，想要让背景图片占满整个屏幕，但一直出现垂直滚动条，加overflow-y: hidden也没用。只有两种情况能隐藏滚动条，但都有问题：

• 设置height:97vh，但没法真正占满屏幕
• 设置margin:-8px，但背景图片会直接消失

初始代码如下：

<div style =" height : 100vh; background-image: url(../../assets/login-bg-1.jpg); margin:0; 
    padding:0; background-repeat: no-repeat; background-size:cover; background-position: center; 
        width: auto;">

    <!-- 页面内容 -->
  </div>

原因分析 #

问题根源是浏览器默认给body元素加了margin: 8px的样式，这会让你的全屏div被挤得超出视口范围，触发滚动条。之前用margin:-8px时背景消失，是因为负边距把图片的显示区域移出了视口。

解决方法 #

1. 重置全局默认样式（最推荐） #

直接清除html和body的默认边距，同时设置高度为100%，彻底消除多余空间：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 隐藏滚动条 */
}

你的div保留原有样式即可，这样就能完美全屏且无滚动条。

2. 针对性调整div样式 #

如果不想修改全局样式，可以给div设置负边距抵消body的默认边距，同时确保背景定位正确：

<div style =" height : 100vh; background-image: url(../../assets/login-bg-1.jpg); margin:-8px; 
    padding:0; background-repeat: no-repeat; background-size:cover; background-position: center; 
        width: auto;">

    <!-- 页面内容 -->
  </div>

不过这个方案适配性较差，不推荐在多页面项目中使用。

3. 响应式类方案（提问者最终解决方式） #

给背景容器添加响应式类，通过类来统一控制尺寸和溢出：

.full-screen-bg {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

HTML中使用类替代内联样式：

<div class="full-screen-bg">
    <!-- 页面内容 -->
</div>

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