平板电脑/手机上页面底部的空白区域

Question

我使用图片作为页面背景，这是代码：

    body {
    background-color: black;
    background: url(/images/bg.jpg); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 100% 0%;
}

它在计算机上看起来不错，但如果我从平板电脑或手机打开页面，页面底部会有空白区域。

以下是它的外观：

以下是平板电脑的外观：

Answer 1

试，

html, body{
  height: 100%;
}

Answer 2

由于图像本身和平板电脑（其中许多）的纵横比不同，使用封面时总会得到一些空白。使用高度100％实际上将覆盖整个高度，但会拉伸图像。

您可能需要比较图像的宽高比和设备的屏幕，然后尝试使用背景大小（百分比）放大或缩小图像，以覆盖所有设备中的所有内容。