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

时间:2015-11-26 14:56:24

标签: javascript jquery css

我有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的示例。任何一点帮助都会得到满意的帮助。

1 个答案:

答案 0 :(得分: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;
  }
}