Bootstrap jQuery 中的 100% 流体宽度 100% 高度布局在 FireFox 中运行良好，但在 Chrome 中完全搞砸了

Question

感谢 Kristian 的帮助，现在可以正常工作

https://jsbin.com/qivevo/1/edit?html,css

最终的解决方案是不同的jQuery。

---

原问题：

这是我通过将各种东西拼凑而成的布局，它在 FireFox 中运行良好，但在 Chrome 中，outerHeight 计算不正确或速度很慢。我不知道这是否可以修复。

在高显示器上的 FireFox 中查看：jsbin.com/yuyey/1，如果所有内容都适合高度，则没有水平滚动条，因为您将窗口缩小到主列中的内容，页脚碰到它并且不重叠，您可以滚动到它，这是所需的行为。在 Chrome 上查看同一个监视器，虽然现在使用我添加的脚本效果更好，但它计算不正确并且覆盖了内容。

演示：jsbin.com/yuyey/1

FireFox 按预期工作：

代码：

/* uses a script to get height, but with or without this script it doesn't work in chrome as it should */
    var navbarht = $('.navbar').actual('outerHeight');
    var footerht = $('.footer').actual('outerHeight');



 function columnHeight() {
     // Column heights should equal the document height minus the header height and footer height
     var newHeight = $(document).height() - (navbarht) - (footerht) + "px";
     $(".primary-col").css("height", newHeight);
     $(".secondary-col").css("height", newHeight);
     $(".tertiary-col").css("height", newHeight);

 }


 $(window).on('load resize', function() {
 $(".primary-col").css("height", "");
     $(".secondary-col").css("height", "");
     $(".tertiary-col").css("height", "");
     columnHeight();
 });


 //$('.site-main').css('padding-top', $('.navbar-fixed-top').outerHeight() + 'px');

 var bumpIt = function() {
         $('.footer').css('margin-top', -(footerht) + 'px');
         $('.sticky-footer-wrap').css('padding-bottom', (footerht) + 'px');
     },
     didResize = false;

 bumpIt();

 $(window).resize(function() {
     didResize = true;
 });
 setInterval(function() {
     if (didResize) {
         didResize = false;
         bumpIt();
     }
 }, 250);

Answer 1

好的，问题是负边距让页脚与内容重叠，因为它可以向上移动。我们需要通过添加一些填充在主要内容的底部添加相同数量的空间来解决此问题：

http://jsbin.com/rakadizo/1

 var bumpIt = function() {
   $('.site-main').css('padding-bottom', (footerht) + 'px');
   $('.footer').css('margin-top', -(footerht) + 'px');
 },
 didResize = false;