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

Question

现在感谢克里斯蒂安的帮助

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

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

---

原始问题：

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

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

DEMO：jsbin.com/yuyey/1

FireFox按预期工作：

CODE：

/* 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;