Chrome中的页脚(和正文)下方的空白区域

Question

当我添加CSS时:

body {
overflow-x: hidden;
}

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

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

你可以看看http://fc-translations.ch

---

UPDATE

我尝试了以下所有给出的建议,但两种解决方案都不起作用 我正在进一步研究并意识到问题不是由添加'overflow-x:hidden;'引起的.'body'元素(或'min-width:960px;'在评论中提到).

遗漏的发生是因为几乎每次当你试图在Chrome的检查器(F12)中为"body"元素禁用某些内容时,空白区域就会消失.

我仍然无法弄清楚导致这个问题的原因.白色空间甚至不在"body"元素中,但正如我所看到的,它出现在Chrome中的"body"下方.

任何的想法？

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

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

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