[CSS] footer 영역 하단에 고정하기 (with position: absolute;)
2022. 8. 14. 22:35ㆍcoding tutorial/CSS
content의 높이가 작으면 footer가 맨 아래가 아닌 애매한 중간 위치에 있게 되는 경우가 있다. 관리자 도구를 확인해보면, html 자체의 높이가 작아서 나타나는 문제이다. 컨텐츠만큼 HTML의 height 가 auto로 늘어나있기 때문에 height를 100%로 맞춰준다.
- 컨텐츠를 감싸고 있는 body에 height: 100% 를 주고
- body 자식 요소인 <div class=wrap>을 min-height: 100% 으로 페이지 최소 높이값을 맞춘다 (wrap이 min-height이 아닌 height을 주면 창의 높이를 낮출 때 footer가 wrap 중간에 오고 만다.)
- wrap에 position: relative; 를 준다.
- wrap 안에 담길 footer 자리를 아래에 만든다. -> padding-bottom으로 footer 높이 만큼의 높이를 남겨준다.
- footer에 position: absolute; , bottom: 0;을 주면 완성.
[예시 코드]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
height: 100%;
}
.wrap {
position: relative;
min-height: 100%;
padding-bottom: 114px;
}
.footer {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="wrap">
<header>헤더</header>
<section>높이가 낮은 섹션</section>
<footer>높이가 114px인 푸터</footer>
</div>
</body>
</html>
출처:
'coding tutorial > CSS' 카테고리의 다른 글
| [CSS] header 영역(navigation) 한 줄 정렬하고 상단에 고정 하기 (0) | 2022.09.05 |
|---|---|
| [CSS] float (0) | 2022.08.14 |
| [CSS] position (0) | 2022.08.14 |
| [CSS] Flexbox (0) | 2022.08.14 |
| CSS3 Transform (트랜스폼) (0) | 2022.05.09 |