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

如果您的网站设计具有静态高度，那么任何高于该高度的浏览器（大多数移动浏览器，因为它们处于纵向方向）将在此时停止，而不是在其下方放置任何其他内容。浏览器默认为＆＃34;没有＆＃34; （即白色空间）之后。

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

或者，（gulp）你可以完全重新开始使用静态矩形设计。

Answer 2

这取决于你是否想要将图像填充100％你的身高只需添加

background-size: 100% 100%;

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

Answer 3

从background-size移除两个body属性，然后添加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

添加到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
  }
}

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

4 个答案: