页面内容超出屏幕高度时底部出现空白边距的问题咨询

问题截图：

• 页面内容未超出屏幕高度时：
  
• 页面内容超出屏幕高度后：
  

问题描述：当页面内容高度刚超出屏幕高度时，底部突然出现空白边距。使用Bootstrap框架，尝试过background-size: 100% 100%导致图片缩小，width: 100%; height: auto;会让图片随内容拉伸，都不符合需求。

现有CSS代码：

body {
background-image: url('Media Files/Images/JPG/BG\ photo\ of\ the\ home\ page.jpg');
background-size: cover;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
background-position: center;
box-sizing: border-box;
background-repeat: no-repeat;
font-family: 'sen', sans-serif;
background-blend-mode: multiply;
}

问题原因 #

你给body设置了height: 100vh，这会把body高度固定为当前视口高度。当页面内容高度超过视口高度时，页面会滚动，但body高度仍停留在100vh，背景只覆盖初始视口区域，滚动后露出的部分就会出现空白。

解决方案 #

把height: 100vh改成min-height: 100vh，这样body高度至少保持视口高度，当内容超过视口高度时，body会自动延伸包裹所有内容，背景也会覆盖整个body范围。

修正后的CSS代码：

body {
background-image: url('Media Files/Images/JPG/BG\ photo\ of\ the\ home\ page.jpg');
background-size: cover;
width: 100vw;
min-height: 100vh; /* 修改为min-height */
margin: 0;
padding: 0;
background-position: center;
box-sizing: border-box;
background-repeat: no-repeat;
font-family: 'sen', sans-serif;
background-blend-mode: multiply;
}

额外提示：width: 100vw可能因浏览器滚动条宽度出现横向滚动条，若不需要可直接去掉，body默认宽度为100%，不会有这个问题。

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