无法删除页面底部的空白（移动）答案

【问题标题】：Cannot remove the white space on the bottom of the page (mobile)无法删除页面底部的空白（移动）
【发布时间】：2018-06-07 16:57:20
【问题描述】：

我的 body 标签上的背景图片有问题。在移动设备上查看时，页面底部有一个空白区域。

这是我的css代码：

     body { 
  background:  url("/images/laptop_bg.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Proxima Nova', Georgia, sans-serif;
 }

html{
  height: 100%;
}

我在 stack-overflow 上找到的解决方案不起作用。任何帮助，将不胜感激。谢谢

【问题讨论】：

您是否尝试将身体的高度设置为 100%？

标签： html css background-image

【解决方案1】：

将height: 100vh; 设置为html 并尝试 background-size: 100% 100%;

     body { 
  background:  url("https://material.angular.io/assets/img/examples/shiba1.jpg");
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  background-repeat: no-repeat;
 }

html{
  height: 100vh;
}

【讨论】：

我之前试过了，还是不行。我通过删除 html 标签上的 CSS 代码来修复它。感谢您的帮助

【解决方案2】：

对于您的body 标签，如下设置CSS 以完整显示background-image。

body {

width: 100%;
background-image: url("/images/laptop_bg.jpg");
background-position: 0%, 0%, 50%, 50%;
background-size: auto, cover;
background-repeat: no-repeat;
font-family: 'Proxima Nova', Georgia, sans-serif;

}

【讨论】：