Question

当我添加CSS时：

body {
overflow-x: hidden;
}

出于某种原因，我在页脚下面有一个很大的空白区域，但只是在Chrome中。我在几个浏览器上测试，一切都很好。

这是一些浏览器错误还是其他问题？

您可以查看http://fc-translations.ch

更新

我尝试了以下所有给出的建议，但两种解决方案都没有奏效。我正在进一步研究，并意识到问题不是由添加溢出x：隐藏;＆＃39;在＆＃39;身体＆＃39;元素（或＆＃39; min-width：960px;＆＃39;在评论中提及）。

遗漏的发生是因为几乎每次你试图禁用“身体”的东西时都会出现这种情况。 Chrome的检查员（F12）中的元素消失了。

我仍然无法弄清楚造成这个问题的原因。白色空间甚至不在身体里面。但是，正如我所看到的，它出现在＆＃39; body＆＃39;在Chrome中。

有什么想法吗？

Answer 1

问题：

问题似乎来自动画bounceInUp应用于.la-tekst a。

动画执行以下操作：

@-webkit-keyframes bounceInUp {
        0%{opacity:0;-webkit-transform:translateY(2000px)}
        60%{opacity:1;-webkit-transform:translateY(-30px)}
        80%{-webkit-transform:translateY(10px)}
        100%{-webkit-transform:translateY(0)
    }
}

也许这是inline-block（.la-tekst a设置为display:inline-block;）的副作用，但是锚元素占据了原始空间，而空间设置为0 bounceInUp动画的百分比。

解决方案：

将overflow:hidden应用于以下任何内容都可以使用

（选择一个选择器）

.page {overflow:hidden;}
.section-content {overflow:hidden;}
.zone-content-wrapper {overflow:hidden;}
.region-content {overflow:hidden;}
.region-content-inner {overflow:hidden;}
.block-block-1 {overflow:hidden;}
.la-tekst {overflow:hidden;}

或

更改锚标记占用的边界区域

.la-tekst a {
    display: inline;
}

或

.la-tekst a {
    display: block;
}

我提供的两个建议将解决问题......第一个会隐藏子元素超出其高度或（包括超级动画锚标记）。

第二种解决方案将改变锚标记占据的边界区域，以便它不再同时占据其动画空间及其原始空间。

Answer 2

在头标记中使用此代码

<script type="text/javascript">


 jQuery(document).ready(function(){

var docheight = jQuery(document).height();
var bodyheight = jQuery('body').height();
var bodywidth = jQuery('body').width();


/*alert(docheight+'--'+bodyheight);*/

if (bodyheight < docheight && bodywidth >= 1000) {

    $(".footer-class-name").css('position',"absolute");

    }


});
</script>

Answer 3

尝试将此添加到您的css

.page{
    overflow:hidden;
}

Answer 4

我有同样的问题，我修复了它。通过添加页脚div的样式：style =“position：absolute; width：100％;”

Answer 5

您需要使用http://necolas.github.io/normalize.css/

等标准化来删除任何浏览器默认样式

Answer 6

您可以在css文件中添加此行。将不会显示空白区域：

div#goog-gt-tt{
display:none;
}

Answer 7

删除CSS：

body.front, body.page-node-18{
    overflow-x: hidden;
}

添加CSS：

body{
    overflow-x: hidden;
}

.front, body.page-node-18{
    overflow-x: hidden;
}

Answer 8

通过一些测试，我意识到如果你不打电话给new WOW().init();，那么页面在Chrome中显示OK，而页脚下方没有额外的空间。

因此，它告诉我，您的布局与WOW库在Chrome中的工作方式存在某种不兼容性。

如果WOW和Chrome在https://github.com/matthieua/WOW

确实存在问题，也许你可以专注于那里或在WOW的github页面中提出错误报告

Answer 9

在css中定义

#omega-media-query-dummy
{
float:left;
}

希望完全帮助你

Answer 10

将位置设置为相对位置;在身体标签上。

编辑：我尝试了Chrome和Chrome金丝雀。白色空间消失。

Chrome中的页脚（和正文）下方的空白区域

10 个答案:

问题：

解决方案：

或