将div填充到视口高度会在Chrome中创建额外的空间而不是Firefox

Question

请查看Firefox和Chrome中的http://workbench2.axaumzug.ch/。从实时示例和图片中可以看出，Chrome似乎在底部以某种方式或整个页面添加了额外的空间。

我研究过如何将div扩展到视口的底部。引用在源中。没有在Safari中测试过。虽然在Firefox中似乎工作正常。我做错了什么或这是一个错误？

有没有办法通过jQuery以某种方式在Chrome的底部没有空间来实现这一点？我目前正在调查http://api.jquery.com/outerHeight/，看看这样的事情是否有帮助。如果您有任何想法或可以确认这是一个错误，请告诉我。

编辑：

为了使这更清晰易懂，这是第三张直接比较Firefox和Chrome的图片。正如您所看到的，Firefox在滚动条和底部之间没有空格，而Chrome确实有一个空间，而且空间实际上也会根据Chrome浏览器窗口的大小而变化。

当我从正文和标签中删除边框时Firefox正好位于页面底部，而滚动条和Chrome则没有。来源是一样的。

为什么Chrome会在网站底部添加额外空间？这个空间来自哪里？如何在Chrome中完全解决这个问题？

我希望现在100％清楚我要问的内容或我想要了解的内容。

正如TimPalmer提到的那样，高度似乎增加了68px。无论是否有标题或其他元素，都会发生这种情况。而这正是我所要达到的。有没有人知道为什么Chrome会这样做？在jQuery中使用outerHeight（true）而不是height时，我能否解决这个问题？

Answer 1

尝试：

headingSpace = 68;
windowHeight = ($(window).height()) - headingSpace);
$('#content-wrapper').css('min-height', windowHeight);

您需要将＃content-wrapper的高度偏移两个标题的高度。 将有更优雅的方式来做到这一点，例如将标题包装在div中并测量所述div，但这将让你至少开始

Answer 2

不是100％肯定你想要做什么，但是一个CSS技巧可以使div成为你屏幕的全尺寸：

.myDiv{
   position: absolute;
   Top: 0px;   
   bottom: 0px;
   right: 0px;
   left: 0px;
   overflow: auto;
}

Answer 3

Chrome确实添加了额外的空间，无论元素是否在导航标签上方，无论$（window）.height（）函数如何。它一直在Firefox中运行，还记得吗？

由于代码使用的是HTML5标签，我只是简单地包含了HTML5 Doctor CSS重置http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/#the-scripts，它现在可以完美地运行而无需更改$（window）.height（）函数，无论导航器上方是否有额外的元素，在Firefox和Chrome中。

当您现在单击任何选项卡链接并且选项卡的内容不足以到达视口的底部时，首先，选项卡内容（窗格）在Firefox中很好地扩展到视口的底部Chrome和Chrome最后一点，滚动条底部和Chrome视口底部之间没有一个像素空间。

需要重置Chrome默认样式。代码/逻辑在整个过程中都很好。我应用的唯一更改是scrollTop：$（'。li-nav'），因此它实际上直接向上滚动到导航标签的顶部，而不是在其上方留下1个像素空间。

在获得IMO研究，记录的问题，图像和实例以及大量工作投票后，我很高兴看到我可以自己对这些事情进行排序。感觉不错！感谢您输入TimPalmer！

对于选民，下次你投票时，请阅读问题，如果你没有看到它，请查看源代码，示例和图像，而不是单击按钮。