Question

我有2个并排放置的容器（浮动）。这两个容器都有二次生成的多种形式，我不知道哪一种最高。

所以我使用一个简单的script来计算divs两个身高，并将最高值应用于两者。足够简单，工作正常：

$(document).ready(function () {
    var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
    $(".left").height(height);
    $(".right").height(height);
});

里面的表单是响应式的，因此它将根据窗口宽度显示在3列，2列或1列中。简单易行css：

.form {
    float:left;
    width:50%;
    padding-right:20px;
}
@media (max-width: 800px) {
  .form {
    width:100%;
    } 
}

我的问题是，在加载页面时，我似乎无法使脚本在调整大小和准备就绪时工作，并在用户手动调整窗口时随时运行脚本。

到目前为止，我已经尝试了我在这里找到的解决方案但到目前为止没有工作，我不知道为什么。我试过了：

$(document).ready(function() {
    $(window).resize(function() {
         var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
            $(".left").height(height);
            $(".right").height(height);
    }).resize();        

});

和

$(document).ready(myfunction);
$(window).on('resize',myfunction);

function myfunction() {
    var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
    $(".left").height(height);
    $(".right").height(height);
}

和

var callback = function () {
  var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
    $(".left").height(height);
    $(".right").height(height);
};

$(document).ready(callback);
$(window).resize(callback);

但是在重新加载窗口时仍然工作，在容器增长时调整大小（800px以下）不会运行脚本（或者高度值不会改变）。

我不是javascript / jquery的专家，所以可能我错过了一些基本的东西，但经过几个小时后我找不到任何解决方案。

以下是 JSFIDDLE ，其中包含原始script的示例。任何一点帮助都会得到满意的帮助。

Answer 1

您处理调整大小的方式是正确的，问题是您之前已经设置了height的两个div，因此它们不再扩展/缩小到这个大小他们的内容。 I.E如果height的{{1}}在加载时设置为286，则div计算将在调整窗口大小时使用286。

要修复，请在计算哪个更大之前重置Math.max：

height

$(window).resize(function() {
  $(".left, .right").height('auto');
  var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
  $(".left, .right").height(height);
}).resize();

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.left {
  float: left;
  width: 50%;
  padding-right: 20px;
  background-color: grey;
  border: 1px solid;
}
.right {
  float: left;
  width: 50%;
  background-color: grey;
}
.form {
  float: left;
  width: 50%;
  padding-right: 20px;
}
input {
  width: 100%;
}
@media (max-width: 800px) {
  .form {
    float: left;
    width: 100%;
    padding-right: 20px;
  }
}

无法准备和调整大小功能一起工作

1 个答案: