본문 바로가기
Development/HTML

HTML UI :: 세로 100% 설정

by Dev. Jkun 2010. 10. 29.
반응형
다시 포스팅을 합니다.
http://www.jkun.net/258 -> 이 링크를 참조하시는게 더욱 좋을 듯합니다.
아래 포스팅은 이전에 테스트를 하였었습니다.
새로 작성된 포스팅을 확인하시면 더 좋을것 같습니다.^^;
혼랸야기 죄송~


검색엔진에서 뒤지다 보니 세로 100%, CSS 세로 100% 등등 많은 포스팅을 볼수가 있었다.
물론 테스트를 거치다 보니 옳은 내용이었으나.. 나의 잘못된(?) 코드 작성 습관으로 인하여
삽질을 면할수가 없었다.
일단 기본적으로 나의 HTML UI 구성코드는 이렇다.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="UI.css" />
<script type="text/javascript" src="MyPrototype.js"></script>
<title> UI Testing </title>
</head>
<body>
<form name="frm" onsubmit="return false;">
<div id="divWrap"><!-- WRAP -->
<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>
</div><!-- //WRAP -->
</form>
</body>
</html>

CSS

html, body {width:100%; height:100%; margin:0; padding:0;}
#divWrap {width:100%; height:100%; margin:0; padding:0}
#divWrap div.header {width:100%; height:70px; margin:0; padding:0; position:relative; z-index:1}
#divWrap div.container {min-height:100%; height:100%;}
#divWrap div.footer {height:70px;}

위와 같이 구성되어 있는경우.. 분명 세로 브라우징이 맞다. "100%" 개념 자체가
상위 엘리먼트의 Height 를 따라가게 되어있기 때문인데..
여기서 어처구니 없는 현상이..

"divWrap" 엘리먼트가 100% 이지만.. 그 위에 <form..........
나는 항상 Form 의 Post 방식의 데이터 전송을 즐겨 사용하는데...
빌어먹을.. form 에도 100% 지정을 해줘야 했던것이다..

html, body, form {width:100%; height:100%; margin:0; padding:0;}

세로 100% 브라우징.. 간단하지만 사람 참 귀찮게 하는 요소다.
반드시 footer (하단) 요소를 하단에 고정시키고자 함에 의해서 그런거지만..
일단 뜻하지 않게 삽질 하는 사람들에게 도움이 되기를.


반응형

'Development > HTML' 카테고리의 다른 글

최고의 HTML 편집기가 궁금합니다.  (0) 2011.11.09
3D로 강력해진 구글 ‘크롬9′ 공개  (0) 2011.02.10
HTML UI 구성  (0) 2010.11.17
UI : 엘리먼트 배치  (0) 2010.11.10
HTML5의 모든 것  (0) 2010.07.29

댓글