将 div 填充到视口高度会在 Chrome 而不是 Firefox 中产生额外的空间答案

【问题标题】：Fill div to viewport height makes extra space in Chrome not Firefox将 div 填充到视口高度会在 Chrome 而不是 Firefox 中产生额外的空间
【发布时间】：2013-12-11 15:46:31
【问题描述】：

请查看 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时，我可以解决这个问题吗？

【问题讨论】：

如果有人可以让我知道这是如何未被研究或不清楚的，我会尝试编辑问题以使其更好。想给出一个活生生的例子，包括图片，评论源代码（你看过源代码堆栈上其他问题的引用吗，你真的检查过源代码吗？？）并要求比较 Firefox 和 Chrome 将使这一点非常清楚.帮我说清楚。

标签： javascript jquery html css google-chrome

【解决方案1】：

试试：

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

您需要将#content-wrapper 的高度偏移两个标题的高度。会有更优雅的方法来做到这一点，例如将标题包装在一个 div 中并测量所说的 div，但这至少会让你继续前进

【讨论】：

68 是根据 Chrome 开发工具显示的标题高度
将标题放在 div 中会在 Firefox 和 Chrome 中产生影响吗？事情是该网站是我希望它在 Firefox 中的样子，尽管 Chrome 呈现它不同，无论标题如何。这就是我想要找出的。为什么 Chrome 真的会增加额外的空间？理想情况下，当单击具有较少内容的窗格的选项卡时，窗格应拉伸到视口的底部，并且滚动条不应留有任何空间可向下滚动。这在 Chrome 中并非如此，可以看出。如果我将标题（和其他元素）包装在 div 中，我应该改用 outerHeight 吗？
@lowtechsun 您共享的工作台对我来说在 chrome 和 firefox 中都有同样的问题。
问题肯定存在。 Firefox 中 1 px 的额外空间随着 scrollTop: $('.li-nav') 消失了。 Chrome 仍然会显示额外的空间，无论 scrollTop: $('.li-nav') 是否在 css 中有或没有边框。但是我找到了解决方案，请参阅下面的更新工作台和解决方案。

【解决方案2】：

不是 100% 确定您要做什么，但是一个 CSS 技巧可以使 div 成为您的屏幕的完整大小：

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

【讨论】：

添加了一张图片以更好地展示 Firefox 和 Chrome 之间的区别。您可以自己将其与实时链接进行比较，如果您愿意，也可以自己查看。让 div 扩展到视口底部不是我要的。我在问 Firefox 中没有的 Chrome 中的额外空间来自哪里。希望这有助于理解我想要学习的内容。

【解决方案3】：

Chrome 确实添加了额外的空间，无论元素是否位于导航选项卡上方，也不管 $(window).height() 函数如何。它一直在 Firefox 中运行，记得吗？

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

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

这是需要重置的 Chrome 默认样式问题。代码/逻辑一直都很好。我应用的唯一更改是 scrollTop: $('.li-nav')，因此它确实直接向上滚动到导航选项卡的顶部，而不是在其上方留下 1 个像素空间。

在 IMO 研究、记录的问题被投票否决后，我很高兴看到我可以自己整理这些东西。感觉不错！感谢您的意见 TimPalmer！

对于投票者，下次您投反对票时，请阅读问题，如果您不明白，请查看源代码、示例和图像，而不仅仅是单击按钮。

【讨论】：