- 구조
<html>
<head>
<body>
<div class = "wrap" />
<div class = "footer />
</body>
html,
body {
height: 100%;
}
.wrap {
min-height: 100%;
padding-bottom: 123px;
}
.footer {
transform: translateY(-100%);
height: 123px;
width: 100%;
}
1. wrap의 높이가 브라우저 높이만큼 잡혀야하므로 최소높이 min-height:100% 지정
2. footer가 본문 콘텐츠(wrap)를 가리는 것을 방지하기 위해 footer의 높이만큼 padding-bottom을 지정한다.
| transform:translateY() | 상하(수직 방향)의 이동 거리 값을 지정 (+: 아래쪽 / -: 위쪽) |
- footer를 translateY:-100%로 지정해 footer크기만큼 위로 끌어올림
✅콘텐츠의 영역에 관계없이 footer을 하단에 고정할 것이기 때문에
translateY:-100% 을 지정해 wrap의 padding 영역을 footer 영역으로 채운다.
밑에 초록부분이 wrap이 가지는 padding이다
그 padding 영역에 footer가 들어간것
❌ translateY()를 지정하지 않으면
wrap의 padding-bottom은 footer의 높이만큼 공백을 가지게 된다.
