열의 높이(가령 div 높이)를 동일하게 맞추는 것은 매우 간단합니다. 동일한 클래스(Class)를 가진 컬럼(열; Column)의 높이를 모두 체크하여 가장 높은 컬럼의 높이로 다른 컬럼의 높이를 설정해주면 됩니다.
다음과 같은 jQuery 스크립트를 사용할 수 있습니다.
$(document).ready(function(){ //set the starting bigestHeight variable // 초기 bigestHeight 변수 설정 var biggestHeight = 0; //check each of them // 각 요소의 높이를 체크 $('.equal_height').each(function(){ //if the height of the current element is //bigger then the current biggestHeight value // 현재 요소의 높이가 현재 저장되어 // 있는 biggestHeight 값보다 큰 경우 if($(this).height() > biggestHeight){ //update the biggestHeight with the //height of the current elements // 현재 요소의 높이로 biggestHeight 업데이트 biggestHeight = $(this).height(); } }); //when checking for biggestHeight is done set that //height to all the elements // biggestHeight 체크가 완료되면 // 해당 높이를 모든 요소에 적용 $('.equal_height').height(biggestHeight); }); // Source: http://web.enavu.com
여기에서 실제 작동을 확인해볼 수 있습니다.