윈도우에서 다시 계산되는 동일한 높이 열

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 문제의 해결책이 아닙니다. 이것은 JavaScript가 필요없는 CSS 솔루션입니다. 고정 된 폭이 설정되어 있지 않은 경우이 너무 크기 조정에 따라 작동합니다

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/