Question

我有一个相同高度列的脚本。我刚遇到一个问题，其中table-filter / sort / paginate插件可以将内部窗口的高度更改为初始文档加载。我真的不确定如何正确地使用resize（）来帮我解决这个问题？

/*******************************/
/*  EQUAL HEIGHT COLUMNS
/*******************************/
$(window).load(function() {
   var maxHeight = -1;

   $('.equal').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.equal').each(function() {
     $(this).height(maxHeight);
   });
 });

编辑：

我尝试绑定调整大小并像这样加载，但是没有用......

/*******************************/
/*  EQUAL HEIGHT COLUMNS
/*******************************/
$(window).on("resize", function() {
   var maxHeight = -1;

   $('.equal').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.equal').each(function() {
     $(this).height(maxHeight);
   });
 });.resize();

Answer 1

尝试将您的代码更改为：

$('window .equal').on('resize', function() {
     var maxHeight = -1;

     $('.equal').each(function() {
         maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
         $(this).height(maxHeight);
     });
});

Answer 2

编辑：我说谎了，你需要jquery resize plugin来实现这个目标！

<script src="http://github.com/cowboy/jquery-resize/raw/v1.1/jquery.ba-resize.js"></script>

窗口没有调整大小，调整大小的是.equal列。参加他们的resize活动。

$('.equal').on("resize",  function(){
  var maxHeight = -1;

  $('.equal').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
  });

  $('.equal').each(function() {
     $(this).height(maxHeight);
   });
 });

Answer 3

<强> CSS

#wrapper{overflow:hidden;}
#div1{width:200px;background: red;float: left;padding-bottom:10000px;margin-bottom:-10000px;}
#div2{width:300px;background: blue;float: left;padding-bottom:10000px;margin-bottom:-10000px;}

<强> HTML

<div id="wrapper">
    <div id="div1">
        a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    </div>
    <div id="div2">
        a<br>a<br>a<br>a<br>
    </div>
</div>

你不需要任何javascript，如果你认为你的页面可以超过10000px hieght而不仅仅是将padding-bottom和margin-bottom增加为负数并保持相同的数量。

需要使用相等高度的列来调整动态内容的大小

3 个答案: