如何删除网页底部的空白？答案

【问题标题】：How can I remove the white space at the bottom of my web pages?如何删除网页底部的空白？
【发布时间】：2016-07-17 11:00:36
【问题描述】：

我正在尝试使用 Wordpress 创建一个网站。我创建了一个主题，并且我的大部分页面都是使用页面模板创建的，因为我想远离博客的外观。

在我在 ipad 上以纵向模式查看该网站之前，一切看起来都很棒。我在每一页的底部都有一个巨大的空白。我使用了 Chrome Canary 的开发者工具，但找不到导致空白的元素。

我已经搜索论坛好几天了，并尝试了可以帮助其他人解决问题的解决方案。到目前为止没有运气。

我尝试使用以下媒体查询：

 @media only screen and (min-width: 768px) and (max-device-width: 1024px) and      (orientation:portrait)   and (-webkit-min-device-pixel-ratio: 1) {

 Html,body{
     Overflow:hidden;
 }

当我在 ipad 上处于纵向模式时，每个页面的底部仍然有巨大的空白。

请帮助我找到解决此问题的方法。这是我网站的链接：http://www.davidsdrift.com/

感谢您的帮助。

【问题讨论】：

标签： html css wordpress

【解决方案1】：

从body 中删除两个background-size 属性并添加background-size: cover;。

添加这个选择器

html {
    min-height: 100%;
}

无论分辨率如何，您的背景现在都应该覆盖整个屏幕。你也可以加background-position: center center;。

例子

html {
    min-height: 100%
}
body {
    background: url(images/homePage.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

【讨论】：

另外，添加一个媒体查询，这样这只发生在纵向模式下？
由于 background-size 已经设置为 100%，我相信这是他们希望在不需要使用媒体查询的情况下实现的。我可能弄错了。
非常感谢！出于某种原因，我认为空白本身会响应纵向布局，但我现在意识到视口保持固定，您必须用图像填充空间。一旦我研究它，它就非常合乎逻辑。我也刚刚修复了 html 标签中的图像，而不是 body 标签，这也很好用。我只是一个菜鸟！

【解决方案2】：

如果您的网站设计具有静态高度，那么任何高于该高度的浏览器（大多数移动浏览器，因为它们是纵向的）都会在该点停止，并且不会在下方放置任何其他内容。之后浏览器默认为“无”（即空白）。

您可以设置一个简单的背景颜色，使其不只是在您的设计区域下方默认为白色 (body {background-color: #CCCCCC;})，或者尝试比这更高级的颜色。

或者，（gulp）您可以完全重新调整网站以不使用静态矩形设计。

【讨论】：

【解决方案3】：

这取决于您是否想将图像填充到 100% 的高度，只需添加

background-size: 100% 100%;

如果您想填充内容，则使用百分比而不是全高像素

【讨论】：

【解决方案4】：

补充 Joe 的回答：您在 ipad 上以纵向模式看到空白的原因是因为背景图像的纵横比和方向。

对此有无数的修复方法，但是它们都取决于您希望如何处理这些额外的空白。您可以放大背景以覆盖整个空间、重复背景、使用 CSS3 属性创建镜像效果等。

假设您只希望背景在纵向模式下占据整个空间，请使用：

@media (orientation:portrait){
  html{ min-height:100% }
  body {
    background:url(images/homePage.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center
  }
}

【讨论】：