페이지 최소 높이값 100%로 만들기

홈페이지를 만들때 최소 높이값이 100%로 해서 컨텐츠 양이 작아도 화면에 꽉찰 수 있도록 만드는 경우가 많습니다.

헤더부분은 페이지 제일 위로 푸터부분은 페이 제일 아래로 가게 만들고, 중앙의 컨텐츠의 높이 만큼 늘어납니다.

홈페이지를 만들 때 최소 높이 값이 100%로 해서 컨텐츠 양이 작아도 화면에 꽉 찰 수 있도록 만드는 방법입니다.

 

HTML

<div class="wrapper">
	<div class="header"></div>
	<div class="contents"></div>
	<dic class="footer"></div>
</div>

 

CSS

.wrapper {position:relative; min-height:100%;}
.wrapper .header {height:90px;}
.wrapper .contents {padding-bottom:120px;}
.wrapper .footer {position:absolute; width:100%; height:120px; bottom:0;}

 

---

개인 공부용으로 만들었습니다. 
다른 분들에게도 도움이 되었으면 좋겠습니다. 
틀린 부분이 있으면 댓글을 남겨주시면 수정하겠습니다.

index(높이값100%).html

0.00MB