동일한 높이 설정 jQuery로 창 크기 조정

jQuery를 사용하여 열의 높이를 균일하게하려고합니다. 내 솔루션은 페이지로드시 잘 작동하지만 창 크기를 조정할 수는 없습니다. 아래 코드 :동일한 높이 설정 jQuery로 창 크기 조정

function equalizeCols(){ 
     var tallest = 0; 
     var program = $("#programs li"); 
     var blueSpace = $("#programs li .programInfo"); 

     program.each(function(){ 
      var thisHeight = $(this).height(); 
      var imgHeight = $("#programs li img").height(); 
      var leftOver = thisHeight - imgHeight; 

      if(leftOver > tallest){ 
       tallest = leftOver; 
      } 
     }); 
     blueSpace.height(tallest); 
    } 

$(window).load(equalizeCols);

간단히만큼, 모든 목록 항목을 통해이 반복, 가장 높은 높이를 가져옵니다 다음이 높이 목록의 모든 항목을 설정합니다. 각 목록 항목의 너비는 백분율이므로 창 크기에 따라 높이가 변경됩니다. 즉, 윈도우 크기 조정 작업이 필요합니다. $(window).resize(equalizeCols);을 단순히 수행하면 높이가 이미로드로 설정되어 있으므로 목록 항목이 계속 커지고 커집니다.

어떻게하면이 코드를 창 크기 조정 작업에 적용 할 수 있습니까?

출처

2013-06-17 JCHASE11

자바 스크립트가 문제를 해결하는 올바른 방법일까요? 그것은 CSS로 할 수 없을까요? JS 솔루션은 비율에 관계없이 취약한 것으로 나타납니다. –

여기 좋은 CSS 솔루션을 생각할 수 없습니다. 어떤 아이디어 (flexbox를 사용하지 않고)? – JCHASE11

@jchase http://bit.ly/12Rghfn에서 CSS 기반 솔루션을 사용하고 있습니다. 문제는 Bootstrap에 특화된 것이지만 솔루션은 일반적입니다. –

$(window).resize(function() { 
    equalizeCols(); 
});

코드와 다른 방식으로 실행되는지 여부는 확실하지 않습니다. 알려 주시면보다 나은 해결책을 찾아 보도록하겠습니다.

출처

2013-06-17 21:00:20

나는 이것을 시도했지만 아무런 효과가 없습니다. 내 것은 똑같은 것을 쓰는 더 짧은 방법 일뿐입니다. 내 코드를 업데이트하여 현재 진행 상태를 표시합니다. – JCHASE11

동일한 높이 설정 jQuery로 창 크기 조정

답변

관련 문제