在窗口調整大小重新計算等高度列

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/