YesYo.com MintState Forums  
뒤로    YesYo.com MintState BBS > Tech > ETC
검색
멤버이름  오토
비밀번호 
 

 
작성일 : 11-08-30 17:38
footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃
 글쓴이 : MintState
조회 : 5,495  
footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃

웹사이트 및 사이트를 만든 회사의 정보를 제공하는 footer의 위치는 대부분 맨 아래쪽에 위치합니다.
사이트별 차이라면, 컨텐츠가 끝나는 부분에 위치하느냐 아니면 브라우저의 길이에 상관없이 항상 브라우저 하단에 위치하느냐 일 것입니다.

한게임재팬에서 제작하고 있는 A프로젝트의 경우, div 레이아웃이면서 footer는 항상 브라우저 하단에 위치하도록 결정되었습니다.
또한 header와 footer는 width 100% 이면서 백그라운드 색상이 있고, 컨텐츠 영역은 width 값이 고정되어 있습니다.

지금부터 브라우저 길이에 상관없이 footer를 항상 브라우저 하단에 위치시키는 방법에 대해 알아보도록 하겠습니다.


높이를 100%로 한다는 것의 % 의 기준은 상위 엘리먼트의 높이 값입니다.
그러므로 레이아웃 div 박스의 높이가 100%가 되려면, 상위 엘리먼트인 body 태그와 body의 상위 엘리먼트인 html 태그 역시 높이가 100%로 지정되어야 합니다.

<!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>
<style>
html, body { height: 100%; margin: 0; padding: 0; }
#header { height: 100px; background: #ddd; position: relative; z-index: 1; }
#content-box { min-height: 100%; margin: -100px 0 -50px; }
*html #content-box { height: 100%; }
#content { padding: 100px 0 50px;  background: red;}
#footer { height: 50px; background: #ddd; }
</style>
</head>
<body>
<div id=header> header (height 100pixel) </div>
<div id=content-box>
	<div id=content>
		<p>contents</p><p>contents</p><p>contents</p>
	</div>
</div>
<div id=footer> footer (height 50pixel) </div> 
</body>
<html>


위 소스를 도식적으로 나타내면 다음과 같습니다.(그림 상의 색상은 표현을 위한 것으로 CSS 소스와는 관련없음)


content-box에는 컨텐츠 길이에 따라 height 값이 조절되도록 [min-height:100%] 속성을 부여합니다. 단, IE에서는 min-height 속성이 구현되지 않으나 height가 min-height 역할을 하므로 IE용 핵을 사용하여 height:100% 속성을 부여합니다.

header와 footer 은 width가 100% 이어야 하므로 content-box 안에 포함되지 않아야 하나 content-box에 height를 100%로 적용하였으므로, 브라우저의 높이는

  content-box 높이 100% + header 높이 100px + footer 높이 50px

를 더한 값이 되므로 브라우저 높이 100%에 150px 이 더해져 원치 않는 스크롤이 생기게 됩니다.
따라서, content-box 에는 [margin:-100px 0 -50px 0] 를, content 에는 [padding:100px 0 50px 0] 를, header에는 [position: relative; z-index: 1;] 값을 부여하여, header 는 content 위에 나타나고, 실제 컨텐츠는 header 아래쪽에서 시작되도록 합니다.
그리고, content 박스는 아래쪽에 50px 의 패딩값을 가지므로, 길이가 길어져 스크롤이 생기더라도 footer가 컨텐츠 내용을 덮는 경우는 없을 것입니다.
위 소스는 IE5.0 이상 7.0 이하 및 Firefox, opera 최신 버전에서 잘 동작합니다.

참고사이트 : 실전 웹 표준 가이드 (2005)

출처 : http://html.nhndesign.com/?mid=blog&category=91&document_srl=634
첨부 파일
파일 종류: gif height100.gif (36.1K, 0 views)
파일 종류: gif height100_02.gif (9.0K, 0 views)
파일 종류: pdf Cross Browsing 가이드(2003).pdf (891.0K, 0 views)
파일 종류: pdf 웹 표준 기반 홈페이지 구축 가이드 (2004).pdf (766.9K, 0 views)
Rated 0/5 (0%) (0 Votes)

(\__/)
(='.'=)
(")_(")~
Search Infomation by MintState
MintState

 
 

Total 69
번호 제   목 글쓴이 날짜 조회
69 다음팟 인코더(DaumPotEncoder) 최종버전 MintState 10-27 81
68 유튜브(Youtube) 이미지 주소 MintState 10-25 79
67 모바일웹에서 레이어를 띄우면 본창 스크롤 안되게 하는 방법 MintState 11-15 949
66 SD카드 USB 복구 포멧 프로그램 - SDFormatter MintState 11-14 1357
65 애드센스 실적 보고서에는 6가지 요소가 있다 MintState 06-02 2802
64 MP3 태그가 깨질 경우 UTF 로 변환하기 MintState 04-22 2604
63 sens_mail 리턴메일 대처법 MintState 03-05 2877
62 CSS Text Button Design MintState 10-15 3197
61 CSS3 Image Styles MintState 05-06 3351
60 SQLite 를 관리 할 수 있는 툴 MintState 02-13 4705
59 특수문자표 MintState 12-21 4583
58 Mime Types MintState 09-19 4941
57 footer가 항상 브라우저 하단에 위치하는 높이 100% 레이아웃 MintState 08-30 5496
56 9가지 QR Code Data Type MintState 04-12 8499
55 웹표준 CSS margin/padding 비교 MintState 04-05 6138
54 Mbps,Kbps,KB/s,cps 속도 단위 차이점 비교 MintState 05-18 10020
53 Flash 업로더 제작 MintState 02-16 6155
52 백그라운드이미지를 부드럽게 바꿔주는 방법 MintState 12-28 7045
51 웹 조각(Web Slices) MintState 07-13 7832
50 웹로그(Weblog, 블로그)란? MintState 03-18 7339
 1  2  3  4  
모바일 버전으로 보기
CopyRight ©2004 - 2017, YesYo.com MintState. ™