页脚（和正文）下面的空白（用铬）

Question

当我添加CSS时：

body {
overflow-x: hidden;
}

由于某些原因，我在页脚下面有很大的空白，但只是在Chrome中。我在几个浏览器上进行了测试，一切都很好。

这是浏览器的bug还是其他问题？

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

更新

我尝试了以下所有给出的建议，但两个解决方案都不起作用。我进行了进一步的研究，并意识到问题并不是由添加“overflow-x：hidden；”引起的。在“body”元素（或注释中提到的“min-width：960px；”）上。

省略的发生是因为几乎每次当你尝试在Chrome的检查器(F12)中禁用“body”元素时，空白就会消失。

我还是弄不清楚是什么原因造成了这个问题。空白甚至不在“身体”元素，但正如我所看到的，它出现在“身体”下面的铬。

知道吗？

Answer 1

在head标记中使用此代码

<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 2

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

该动画执行以下操作：

@-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-teksta被设置为display:inline-block)，但是锚点元素占用了它的原始空间，以及从bounceinup动画的0%开始设置的空间。

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

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

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