Footer 웹 페이지 최하위에 고정하는 방법

Issue

Footer 웹 페이지 최하위에 고정하는 방법에 대해 고민해보았다
밴치마킹을 해보았는데 대부분 사이트들이 이렇게 활용하는것처럼 보여 이 사이트에도 적용해보았다
어떻게 적용했는지 살펴보자

<body>
  <header />
  <container />
  <footer />
</body>

해결 방법

body 영역 수정

웹 컨텐츠 크기가 screen height에 꽉 차도록 설정했다.

body {
  min-height: 100vh;
}

body에 flex를 이용하여 하위 element에 대해 위치 정렬을 편하게 다루자

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer 영역 수정

margin-top에 auto를 주어 footer가 가질 수 있는 최대 마진을 자동으로 갖게 설정한다. \
이렇게 되면 top이 최대 마진으로 잡히니 항상 footer는 최하단에 위치할 수 밖에 없게 된다. \
이 설정은 body에 설정한 min-height가 없더라면 아무런 변화가 없었을 것이다.

footer {
  margin-top: auto;
}

footer 영역을 바꾸기 싫다면?

container 영역에 flex-grow:1 로 설정하면 된다.