Question

我有一个很好的脚本让2个div具有等高。但是在我调整浏览器大小后，高度保持不变，而我需要它才能响应和刷新。

真的不知道该怎么做。

    $(document).ready(function() {
        var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
        $(".h-txt.left").height(height);
        $(".h-img.right").height(height);
    });

我是否需要添加“刷新/调整大小的文档”功能？

Answer 1

只需将代码放入函数中，然后使用'.resize（）'

调用它

    var responsiveSize = function() {
      var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
      $(".h-txt.left").height(height);
      $(".h-img.right").height(height);
    }
    // This will call it on page load
    responsiveSize();

    // This will call it on window resize
    $(window).resize(function(){ 
     responsiveSize();
    });

Answer 2

试试这个：

$(window).resize(function (e) {
    $(".h-txt, .h-img").css("height", "auto");
    var height = Math.max($(".h-txt.left").height(), $(".h-img.right").height());
    $(".h-txt.left").height(height);
    $(".h-img.right").height(height);
});

$(window).trigger("resize");

首先我们将高度重置为“自动”，以确保我们以后总是得到两个<div>中较高的高度。

然后 - 我们实际得到较大的高度，然后将它强加到两个元素上。

每次调整窗口大小时都会重复整个循环 - 我们的函数绑定到窗口的“resize”事件。（$(window).resize(...);）

最后一行只是在页面的初始加载时触发它，所以我们不必实际调整窗口大小以使其第一次启动。

jsfiddle：http://jsfiddle.net/5z0ett7e/

使用js调整大小后刷新高度

2 个答案: