Question

我有一个小的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 - 工作正常

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

Answer 1

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

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

这是因为调用文档就绪时图像的大小是未知的，除非您在属性中指定了它。如果你没有，图像会在加载后立即调整大小，这也会影响内容。因此意外的高度可能是你的功能的结果。

JQuery / JS在浏览器之间和刷新类型之间提供不同的结果

1 个答案: