CSS를 사용하여 DIV 두 개의 높이를 동일하게 만들기

앞에서 jQuery로 Div의 높이를 동일하게 조정하는 방법을 두 차례에 걸쳐 살펴보았습니다(맨 아래 참고 링크 참조). 다음은  CSS를 사용하여 두 개 DIV의 높이를 동일하게 설정하는 방법입니다.

HTML  예시:

<div class="row">
<div class="col">내용 1</div>
<div class="col">내용 2</div>
</div>

flexbox를 이용하여 동일한 요소에 대한 높이를 동일하게 지정할 수 있습니다.

.row {
display: flex; /* 하위 요소(child)의 높이를 동일하게 조정 */
}

.col {
flex: 1; /* 이 코드를 가하면 폭도 동일하게 조정됩니다 */
}
// Source: stackoverflow

여기에서 데모를 확인해볼 수 있습니다. 위에서 display: flex;를 추가하면 자식 요소의 높이가 동일하게 설정됩니다. 자식 요소에서 flex: 1;을 추가하면 폭(너비)도 동일하게 설정됩니다.

두 번째 방법으로 테이블(표) 레이아웃을 사용한 것입니다. IE 8, IE 9를 지원하려면 이 방법을 사용해야 합니다.

.row {
display: table;
}

.col {
display: table-cell;
width: 50%; /* 컬럼(열) 수에 따라 조정 */
}

데모는 여기에서 확인할 수 있습니다.

보통은 jQuery로 쉽게 div의 높이를 동일하게 조정할 수 있습니다. 하지만 간혹 환경에 따라 jQuery나 위의 방법이 잘 작동하지 않는 경우도 있습니다. (예를 들어 워드프레스 테마인 아바다에서 다양한 방법을 시도해봤지만 잘 되지가 않네요. 그런 경우에는 다른 방법을 찾아봐야 할 것 같습니다.)

참고:

• jQuery로 Div의 높이를 동일하게 조정하기 - I
• jQuery로 Div의 높이를 동일하게 조정하기 - II