[자바스크립트] 나란한 두 객체의 높이 맞추기

  위쪽처럼 나란한 두 객체의 높이가 다르면 배경 때문에 보기에 거슬려서 아래쪽처럼 똑같이 맞추고 싶을 때가 있다. 객체 높이가 일정하거나 언제나 어느 한 쪽이 길다면 CSS(스타일시트)만 손보아도 맞출 수 있을 것이다. 그러나 두 객체의 높이가 그때그때 다르다면 CSS로는 어렵고 자바스크립트로 맞출 수 있다.

  아래 스크립트는 ID가 content와 sidebar인 객체의 높이를 비교하여 높은 쪽에 맞춘다.

<script type="text/javascript">
<!-- // content와 sidebar를 같은 높이로 맞추기

(window.onload = function() {  // 화면이 뜬 뒤 처리

  var obj1 = document.getElementById('content'); 
  var obj2 = document.getElementById('sidebar'); 
 
  var obj1_height = obj1.offsetHeight;
  var obj2_height = obj2.offsetHeight;

  if(obj1_height > obj2_height) { obj2.style.height = obj1_height + 'px'; }
  else { obj1.style.height = obj2_height + 'px'; }
})();

//-->
</script>

  여기에 쓰이는 HTML과 CSS 정렬 방식의 기본 틀은 다음과 같다.

<div id="wrap">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

<style>
wrap {
  padding: 15px;
  width: 500px;
  display: inline-block;
}
content {
  position: absolute;
  width: 350px;
}
sidebar {
  width: 140px;
  float: right;
}
</style>

  은둔고수님의 '[javascript] 다른 div 높이가 변경되면 자동으로 div height 크기 조절하기'를 참고하였습니다.