Question

正如标题所说，只有在移动设备上观看时才会出现问题。

在我的电脑上，它看起来完全符合要求但是当我在移动设备上打开它时，背景图像和页脚之间有一个空白区域？

网站正在播放

任何帮助将不胜感激！

Answer 1

我不确定您是如何在后端添加背景图片的，但请尝试添加以下样式。在这里，.page-id-29是添加到当前页面的类，并且您向其添加了背景图像。

.page-id-29 {
    background-image: url(YOUR-IMAGE);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;                 // add the height
    background-position: 50% 50%;  // center the image
}

因此解决方法是添加height: 100vh并更改图像位置，使其居中。

Answer 2

在style.css中添加此内容

/js/routes.js.js

Answer 3

这是因为您的body没有足够content。如果您添加更多内容，则无需任何技巧。

您可以通过在min-height代码中添加body来解决此问题。

.page-id-29 {
    background-image: url(https://claritysalonspa.com/wp-content/uploads/2018/03/IMG_5215.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 92vh; /* this for height */
    background-position: center center; /* to center the image */
}

如果你想让你的页脚始终位于viewport的底部，请同时添加。

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 60px;
    padding: 0 !important; 
}

页脚之间背景下的空白区域（仅限移动）

3 个答案: