Question

我目前正在使用css网格系统开发移动设备网站。

我有一个问题，我会有3-4个背景颜色的功能区/ div /盒，它们看起来是不均匀的，具体取决于每个内容，所以我得到一个jQuery脚本，等于高度，并做了一个伟大的工作

$('#plans').each(function () { //CONTAINER DIV CLASS

        var highestBox = 0;
        $('.pad', this).each(function () { //EACH PANEL CLASS

            if ($(this).height() > highestBox)
                highestBox = $(this).height();
        });

        $('.pad', this).height(highestBox);


    });

我的问题是当用户在平板电脑上时，当他们从纵向更改为横向时，jQuery高度测量不会在没有整页刷新的情况下进行调整，因此它们重叠并做各种丑陋的事情，有没有更好的/不同的方式来实现相同的高度div，可以调整代码，也考虑到这是对CMS的支持，因此用户可能会更改每个框中的内容量，因此我无法设置最小高度。

Answer 1

您可以收听window.resize事件

首先使用函数

包装代码

$(function () {
    function resizeHandler(){
        $('#plans').each(function () { //CONTAINER DIV CLASS

            var highestBox = 0;
            $('.pad', this).each(function () { //EACH PANEL CLASS

                if ($(this).height() > highestBox)
                    highestBox = $(this).height();
            });

            $('.pad', this).height(highestBox);


        });
    }

    resizeHandler(); // call for once when DOM is ready;
});

然后将resize事件绑定到此处理程序。

window.onresize = resizeHandler; // this is the binding

编辑：我想我可以补充一点：首次加载时，您应该手动调用resizeHandler函数一次

我更改了代码并结帐this jsbin

Answer 2

您可以使用.resize()方法将处理程序绑定到 resize JavaScript事件：

$(window).resize(function() {
  var highestBox  = 0,
      plansHeight = $('#plans').height();

  $('.pad', '#plans').each(function () { //EACH PANEL CLASS
    if (plansHeight > highestBox) highestBox = plansHeight;
  });

  $('.pad', '#plans').height(highestBox);
}).resize(); // Call the handler by default

jquery auto height divs与移动设备的问题

2 个答案: