박스 div 높이 똑같이 조절하기 jQuery / javascript

안녕하세요 매니입니다.

 

코딩을 하다보면 상자의 크기가 안에있는 내용에 따라 달라져 높이를 맞춰야하는 경우가 있습니다.

그럴 경우 사용하는 코드입니다.

$('.감싸는박스').each(function(){
	var boxhight = 0;
	$('.변경할 박스', this).each(function(){
		if($(this).height() > boxhight)
		boxhight = $(this).height();
	});
	$('.변경할 박스',this).height(boxhight);
});

높이를 동일하게 맞추고 싶은 div박스 전체를 다른 div로 감싸줍니다.

또는 내부 컨텐츠를 li로하고 ul로 감싸줍니다.

이 경우에는 

감싸는 박스 = ul
변경할 박스 = li

가 됩니다. 위 코드에서 세 항목만 바꾸면 쉽게 동일한 높이로 조절해 깔끔한 디자인을 할 수 있습니다.

 

감사합니다.

 

$('.ul').each(function(){
	var boxheight = 0;
	$('.li', this).each(function(){
		if($(this).height() > boxheight)
		boxheight = $(this).height();
	});
	$('.li',this).height(boxheight);
    console.log(boxheight)
});