用js调整大小后刷新高度

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);
    });

我需要添加 "document on refresh / resize" 功能吗？

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");

首先，我们将高度重置为 "auto"，以确保我们稍后始终获得两个 <div> 中较高者的高度。

然后 - 我们实际上得到了较大的高度，并将其强制到两个元素上。

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

最后一行只是在页面初始加载时触发它，所以我们不必实际调整 window 的大小来让它首次启动。

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

用js调整大小后刷新高度

Refresh height after resizing with js

javascript

responsive-design

resize