背景下方出现空白如何解决？实现全屏背景的布局问题

问题 #

希望背景能够全屏显示，但footerWrap下方出现空白区域。

现有代码 #

body{
    background: url('./Images/login.jpg');
    height: 100vh;
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.wrapper{
    min-height: 100vh;
    display: flex;
    justify-content: right;
    
}  

修复步骤 #

• 先重置浏览器默认边距，避免自带的margin/padding挤压空间：

  html, body {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  

• 将body的height: 100vh改为min-height: 100vh，确保页面内容超过视口高度时，背景能跟随内容延伸：

  body{
      background: url('./Images/login.jpg');
      min-height: 100vh; /* 替换原height属性 */
      background-repeat: no-repeat;
      width: 100%;
      background-size: cover;
      background-position: center;
  }
  

• 若滚动页面仍出现空白，可添加background-attachment: fixed让背景固定在视口，滚动时不会出现断层：

  body{
      /* 保留原有样式 */
      background-attachment: fixed;
  }
  

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