在窗口调整大小重新计算等高度列

Question

下面的代码应该找到最大列（.border）的高度，并调整.container div中找到的任何其他列的高度等于它。不幸的是，我一直无法获得此代码的工作，所以我希望有人比我更能帮助我。

还值得一提的是，每当窗口大小调整后，应重新计算列高度并重新调整列大小。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //Bind the window onresize event 
     $(window).bind('resize', resizeWindow); 

     //Call resizeWindow() function immediately to intiially set elements 
     resizeWindow(); 
    }); 

    function resizeWindow(){ 
     //Find all the container parent objects 
     $('.container').each(function(){ 
      //Initialize the height variable 
      var maxHeight = 0; 

      //Cache the jQuery object for faster DOM access and performance 
      var $borders = $(this).find('.border'); 

      //Find all the border child elements within this specific container 
      $borders.each(function(){ 
       //Get current element's height 
       var thisHeight = $(this).height(); 

       //Check if the current height is greater than the max height thus far 
       //If so, change max height to this height 
       if (thisHeight>maxHeight) maxHeight = thisHeight; 
      }); 

      //Now that we have the maximum height of the elements, 
      //set that height for all the .border child elements inside the parent element 
      $borders.height(maxHeight); 
     }); 
    } 
</script> 


<div class="container"> 
    <a href="#" class="border"> 
     <div class="column"> 
      <div class="content">asdf</div> 
     </div> 
    </a> 
    <a href="#" class="border"> 
     <div class="column"> 
      <div class="content">asdf</div> 
     </div> 
    </a> 
</div> 

Answer 1

使用的jQuery插件equalHeights：

http://www.cssnewbie.com/equalheights-jquery-plugin

$('.container .border').equalHeights(); // make all .border the same height 
$(window).resize(function(){$('.container .border').equalHeights();}); 

参见：http://jsfiddle.net/rZU35/

Answer 2

这不完全是解决JavaScript问题的方法。这是一个CSS解决方案，不需要任何JavaScript。使用这些样式与您的标记，这两个列将始终具有相同的高度：

div.container { 
    display: table; 
    width: 100px; 
} 

div.container > a { 
    display: table-cell; 
    border: 1px solid red; 
} 

演示

http://jsfiddle.net/wmbcr/

这将在大小调整工作太，如果没有固定的宽度设置。

Answer 3

我想你应该提供一个高度，你DIV不是<a>。

试试这个小提琴：

http://jsfiddle.net/ddFtX/1/