JQuery/JS 在浏览器之间和刷新类型之间给出不同的结果答案

【问题标题】：JQuery/JS Giving different results between browsers and between refresh typesJQuery/JS 在浏览器之间和刷新类型之间给出不同的结果
【发布时间】：2014-03-06 17:43:19
【问题描述】：

我有一个小的 Javascript/JQuery 函数，它获取页面上内容的高度，然后设置中心 div 的高度以匹配。如果内容没有页面显示的那么长，那么它将 div 扩展到内容之外，以确保中心 div 一直延伸到页脚。

问题是，它似乎在不同的浏览器中表现不同，并且取决于刷新类型，而对于我来说，我无法弄清楚为什么。

首先，代码如下：

<script>
    //sets a minimum height
    var minHeight = 200;

    var resizeContent = function(){
        //gets the height of the page as a whole, then takes off a little for the header and footer
        var h = $('body').height() - $('#footer').height() - $('#header').height();
        //gets the height of content in the wrapper div, which is directly inside the center div
        var h2 = $('#wrapper').height() + 30;
        //gets the height of the 2 sidebar divs
        var h3 = $('#left').height();
        var h4 = $('#right').height();

        //compares them all to take the highest one
        h = h > minHeight ? h : minHeight;
        h = h > h2 ? h : h2;
        h = h > h3 ? h : h3;
        h = h > h4 ? h : h4;

        //sets the height of the center div
        $('#content').height(h);
    }

    //calls on page load and resize
    $(document).ready(resizeContent);
    $(window).resize(resizeContent);
</script>

现在它正在做的事情如下。

Internet Explorer
常规页面加载 - 工作正常
定期刷新 - 工作正常
Shift Refresh - 工作正常

火狐
常规页面加载 - 工作正常
定期刷新 - 工作正常
Shift Refresh - 内容 div 比应有的短

铬
常规页面加载 - 内容 div 比应有的短
定期刷新 - 内容 div 比应有的短
Shift Refresh - 工作正常

有人对这里可能发生的事情有任何想法吗？

【问题讨论】：

标签： javascript jquery refresh

【解决方案1】：

在许多情况下，您需要在 onLoad 上调用此类方法。

$(window).load(function(){
  resizeContent();
});

这是因为在调用 document ready 时图像的大小是未知的，除非您在属性中指定了它。如果您不这样做，图像会在加载后立即调整大小，这也会影响内容。因此，您的函数可能会导致意想不到的高度。

【讨论】：