[JavaScript] div 높이 조정을 유동적으로 설정하기

 

id=contain
position=relative

id=left
position=relative

id=center
position=absolute

id=tail
position=relative

위와 같은 형식의 레이어를 작성할 경우 center의 내용이 contain 영역의 크기보다 크기가 크기 때문에 tail 영역의 내용을 덮어버리거나 가려져 내용이 보이지 않게 된다.
center의 position 속성이 absolute 이기 때문에 contain 영역의 높이를 center가 포함할 수 있도록 지정해 주어야 하는데 center 영역에 게시판같이 높이가 일정하지 않은 내용이 오면 이를 지정해 주기가 힘들다.
이럴 경우 다음과 같은 스크립트를 사용하여 페이지를 로드한 후 contain의 높이와 center의 높이를 비교한 후 둘중 큰 높이를 contain의 높이로 변경하여 tail의 내용도 제대로 출력되게 수정할 수 있다.

function fix_height(fname,lname) {
 if(document.getElementById(fname) && document.getElementById(lname)) {
  var Fname = document.getElementById(fname);
  var Lname = document.getElementById(lname);
  
  if(Fname.offsetHeight < Lname.offsetHeight)
   Fname.style.height = Lname.offsetHeight;
 }
}

<script language="javascript">
 fix_height('contain','center'); // 테이블 높이 조정
</script>

위 내용을 실행하고 나면 아래의 내용과 같이 크기가 변하게 된다.

id=contain
position=relative

id=left
position=relative

id=center
position=absolute