자주 확인하는 CSS 포럼인 CDK(CSS Design Korea)에 어떤분이 페이지 레이아웃에 대해 질문을 올린게 있었다. 확인 해보니 나도 한참 골머리를 쌓았던 가로세로 100% 레이아웃 사이트 제작 이었다. 그전 회사에서 작업한 MCC(MirageWorks Control Center) 사이트작업도 가로세로 100% 인 사이트 였는데 CSS만으로 레이아웃을 해결못하고 자바스크립을 사용해 해결한기억이있어 다시한번 해결하려는데 역시 난감한부분이 있다. (사실 옛날처럼 테이블로 레이아웃을 만들면 어렵지않다.)
MCC(MirageWorks Control Center) 의 User 페이지의 모습과 소스
MCC 사이트 작업을 하기전, 세로100%레이아웃 작업에 골머리를 썩고있었는데 http://www.dave-woods.co.uk/?p=144이곳의 내용을 이용한 신현석님의 개인홈페이지에서 해결방법을 알아내고 그뒤로 그방법을 써서 세로100% 사이트제작을 해왔다.
CSS 만을 이용해서 100% Height Layout 제작방법
CSS
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
position: relative;
height: 100px;
background: #ddd;
z-index: 1;
}
.container{
min-height: 100%;
margin: -100px 0 -50px;
}
*html .container{
height: 100%;
}
.content-area {
padding: 100px 0 50px;
}
.footer{
height: 50px;
background: #ddd;
}
Markup
<div class="header">
Header
</div>
<div class=”container”>
<div class=”content-area”>
Contents
</div>
</div>
<div class=”footer”>
Footer
</div>
</body>
하지만 가로세로 100% 에 서브메뉴가있는 구조 는 정말 난감했다. 어떤경우냐면, 가로세로 100% 레이아웃에 서브메뉴의 높이값이 필요한 디자인(마진&패딩 값이 존재하고, 100%의 높이 또는 최대최소 높이를 정해서 스크롤 생성등등) 에서는 CSS 만으로 해결하기가 힘들었다. 결국 자바스크립트의 offsetheight를 이용해 Header 와 Footer 를 제외한 가운데 Container 부분의 높이를 구해서 해결을했다. 하지만 자바스크립 미숙인지 어떻게든 해결은 했지만, 내가만든 스크립트가 브라우저마다 적용이 조금씩 달라서 힘들었기도 하고, 약간 부족한게 있어서 찜찜하기도 했다.
그래서 이번에는 다른방법을 써봤다. 마크업시 아에 테이블을 빼고 코딩이아니라 레이아웃을 위해 Header,Container,Footer 를 테이블로 레이아웃을 나누어봤다.
CSS
table{width:100%;height:100%;min-height:768px;border-collapse:collapse;}
td{margin:0;padding:0;vertical-align:top;}
.branding{height:100px;background:#226699;}
.container{height:100%;background:#fff;}
.site_info{height:50px;background:#009900;}
Markup
<table>
<tr><td class="header">
Header
</td></tr>
<tr><td class=”Container”>
SubMenu/Contents
</td></tr>
<tr><td class=”Footer”>
Footer
</td></tr>
</table>
이렇게 사용해보니 Header 와 Footer 를 제외한 Container 의 높이값을 100%로 가질수있었다!! 하지만 기쁨도 잠시 테스트를 Firefox 에서 했는데, Firefox/Chrome/Safari/Opera 에서는 내가 원하는대로 나왔으나 DTD설정이 있는경우에 IE6, IE7 은 가운데 Container 의 100%높이값을 브라우저 그대로 높이값으로 계산해버리는 현상이 나타났다. 결국 원하는대로 해결이 되지않았다. 또 다시 IE를 저주하며 자바스크립 을 사용하지 않고 해결하는방법은 찾지 못했다. 추후 해결방법을 알게되면 다시 글을 써야겠다.
관련링크
문제를 간단하게 해결하는방법을 알아냈다!!
IE 에서만 사용할수 있는데 (어짜피 IE에서만 생기는 문제니까..) height:expression(document.body.clientHeight-60); 이렇게 사용하면 된단다. 뒤에 60은 전체 높이에서 제외할 px 을 적으면 된다. document.body.clientHeight 를 이용해서 자바스크립만들고 뻘짓을 했는데.. CSS 만으로 간단하게 고칠수 있었구나. CDK 를 보다가 알아낸 방법인데.. 역시 배워야할꺼는 많고 세상에 고수들도 많구나~
CSS
html,body { height:100%; margin:0; padding:0; }
.layout { width:100%; height:100%; min-height:768px; border-collapse:collapse; }
.layout td { position:relative; margin:0; padding:0; vertical-align:top; }
.branding { height:100px; background:#226699; }
.container { height:100%; height:expression(document.body.clientHeight-150); background:#fff; }
.site_info { height:50px; background:#009900; }
.navigation-wrapper { float:left; position:relative; width:250px; height:100%; overflow:auto; background:yellow; }
.navigation { width:200px; height:618px; background:#ddd; }
.contents { float:left; min-width:750px; height:100%; background:#dd5588; }
Markup
<table class="layout">
<tr class="branding"><td>
로고 및 메뉴 영역
</td></tr>
<tr class="container" style=""><td>
<div class="navigation-wrapper">
<div class="navigation">
네비
</div>
</div>
<div class="contents">
컨텐츠
</div>
</td></tr>
<tr class="site_info"><td>
푸터 영역
</td></tr>
</table>