页脚之间的背景下方的空白区域（仅限移动设备）答案

【问题标题】：Blank space underneath background between footer (mobile only)页脚之间的背景下方的空白区域（仅限移动设备）
【发布时间】：2018-08-18 01:28:20
【问题描述】：

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

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

网站上线@

https://claritysalonspa.com

任何帮助将不胜感激！

【问题讨论】：

请阅读how to ask a good question，因为社区不会去现场网站调试代码。您需要包含相关代码，它应该做什么以及它当前正在做什么。该元素的检查器打开的屏幕截图也有帮助。

标签： css wordpress html mobile

【解决方案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 并更改图像位置使其居中。

【讨论】：

【解决方案2】：

在你的 style.css 中添加这个

@media screen and (max-width:600px){
.page-id-29{height: 95vh;}

}

【讨论】：

【解决方案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 的底部，请也添加 thi。

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

【讨论】：