wrap
content
sidebar
wrap
content
sidebar

  위쪽처럼 나란한 두 객체의 높이가 다르면 배경 때문에 보기에 거슬려서 아래쪽처럼 똑같이 맞추고 싶을 때가 있다. 객체 높이가 일정하거나 언제나 어느 한 쪽이 길다면 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 크기 조절하기'를 참고하였습니다.
2011/02/06 21:06 2011/02/06 21:06
얽힌 글타래
<그물누리 / 자바스크립트> 글갈래의 다른 글
글 걸기 주소 : 이 글에 다른 글을 걸 수 없습니다

덧글을 달아 주세요

  1. 나그네 2013/01/31 03:36 고유주소 고치기 답하기

    아구 감사합니다 ^^ 떠듬떠듬 여기저기 자료 보면서 하고 있는데 막히던 차에 답이 여기 있었네요!!

    • 팥알 2013/01/31 19:40 고유주소 고치기 답하기

      전에 쓰던 블로그 스킨에서 써먹은 방식이었는데, 도움이 되셨다면 기쁩니다.
      덧글 고맙습니다.^^