100% 레이아웃 잡는 방법 : Jessi's Note

100% 레이아웃

기본적으로 제일 많이 사용하고 있는, 컨텐츠가 없어도 푸터가 하단에 고정되는 100% 레이아웃 잡는 방법

스크린샷

코드보기

css

 html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
header {
	position:relative;
	z-index:2;
	width:100%;
	height:80px;
}
.container {
	position:relative;
	z-index:1;
	min-height:100%;
	margin:-80px auto -200px;
	padding:80px 0 200px;
}
footer {
	clear:both;
	position:relative;
	z-index:2;
	width:100%;
	height:200px;
}

html

 <body>
	<header >
		header
	</header>
 
	<div class="container">
		container
	</div>
 
	<footer>
		footer
	</footer>
</body>

핵심

- 최상의 부모의 Height는 100%여야 한다.

- header와 footer의 z-index는 container보다 높다.

- header와 footer의 영역만큼 container 에서 마이너스 마진을 빼준다.

저작자표시 비영리 동일조건

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

100% 레이아웃 잡는 방법

100% 레이아웃

스크린샷

코드보기

css

html

핵심

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

	html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	}
	header {
	position:relative;
	z-index:2;
	width:100%;
	height:80px;
	}
	.container {
	position:relative;
	z-index:1;
	min-height:100%;
	margin:-80px auto -200px;
	padding:80px 0 200px;
	}
	footer {
	clear:both;
	position:relative;
	z-index:2;
	width:100%;
	height:200px;
	}

	<body>
	<header >
	header
	</header>

	<div class="container">
	container
	</div>

	<footer>
	footer
	</footer>
	</body>