Chrome中页脚（和正文）下方的空白答案

【问题标题】：White space below footer (and body) in ChromeChrome中页脚（和正文）下方的空白
【发布时间】：2014-12-08 09:40:58
【问题描述】：

当我添加 CSS 时：

body {
overflow-x: hidden;
}

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

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

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

更新

我尝试了以下所有给定的建议，但没有一个解决方案有效。我正在进一步研究并意识到问题不是由添加'overflow-x：hidden;'引起的在“body”元素上（或评论中提到的“min-width: 960px;”）。

之所以会出现遗漏，是因为几乎每次您尝试在 Chrome 的检查器 (F12) 中为“body”元素禁用某些东西时，空白都会消失。

我仍然无法弄清楚是什么导致了这个问题。空格甚至不在“body”元素中，但正如我所见，它出现在 Chrome 中的“body”下方。

有什么想法吗？

【问题讨论】：

很少见，但是当我禁用 min-width: 960px;从“身体”...下面的空间消失：S
问题更新了...
您的演示网址已失效...介意重新发布吗？
我的错误，对此感到抱歉...链接已更改...
请在此处发布您的标记，而不是在外部链接中（出于这个确切原因）。如果该链接对未来的读者断开，则此问题将无效。

标签： css google-chrome

【解决方案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;），但锚元素既占据了它的原始空间，又占据了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;
}

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

第二种方案会改变anchor标签占据的边界区域，使其不再同时占据其动画空间和原来的空间。

【讨论】：

【解决方案2】：

在你的 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>

【讨论】：

【解决方案3】：

尝试将其添加到您的 css 中

.page{
    overflow:hidden;
}

【讨论】：

【解决方案4】：

我遇到了同样的问题，我已经解决了。通过添加页脚的样式 div:style="position:absolute;width:100%;"

【讨论】：

【解决方案5】：

您需要使用规范化器（例如http://necolas.github.io/normalize.css/）去除任何浏览器默认样式

【讨论】：

【解决方案6】：

您可以在您的 css 文件中添加这一行。不会显示空白：

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

【讨论】：

【解决方案7】：

通过一些测试，我意识到如果您不调用new WOW().init();，则页面在 Chrome 中显示 OK，而页脚下方没有多余的空间。

这告诉我，您的布局和 WOW 库在 Chrome 中的工作方式存在某种不兼容。

如果WOW和Chrome确实存在问题https://github.com/matthieua/WOW

【讨论】：

【解决方案8】：

在css中定义

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

希望对你有帮助

【讨论】：

这似乎是解决此问题的最简单方法。

【解决方案9】：

删除 CSS：

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

添加 CSS：

body{
    overflow-x: hidden;
}

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

【讨论】：

尝试删除 body{min-width:960px;}

【解决方案10】：

将位置设置为相对；在 body 标签上。

编辑：我尝试了 chrome 和 Chrome canary。空白消失。

【讨论】：