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

Question

我正在尝试使用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/

谢谢你的帮助。

Answer 1

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

您可以设置一个简单的背景颜色，这样它不仅可以在设计区域（ body {background-color: #CCCCCC;} ）下默认不为白色，还可以尝试一些更漂亮的body {background-color: #CCCCCC;} 。

或者，（吞咽）您可以完全重新调整站点的位置，以不使用静态矩形设计。

Answer 2

这取决于您是否要将图像填充为高度的100％，只需添加

background-size: 100% 100%;

否则，如果要填充内容，请使用百分比而不是像素来表示全高

Answer 3

从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;
}

Answer 4

补充一下乔的答案：之所以以纵向模式在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
  }
}