[CSS] footer 하단 고정하기

맨날 footer 하단 고정하는 방법 까먹어서 정리하기 위해서 올림!!

1. fixed로 하단 고정하기

footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 5rem;
}

처음에는 footer는 position:fixed로 하단에 박아버린다고 생각했다.

근데 그렇게 했더니, 이렇게 컨텐츠가 있을 경우, footer 안 쪽으로 먹혀버리는 현상이 발생했다.

fixed로 박을 경우, 다른 값들과 관계없이, 화면의 길이가 늘어나더라도(=스크롤의 길이가 늘어나는 경우) 가장 하단 부분에 박히는 문제가 발생하였다.

 

 

 

2. absolute 사용하기

다음으로는 position : absolute를 사용하였더니, 상대 위치에 따라 중간 지점에 고정되어 버리는 문제가 발생하였다.

 

 

부모 태그에 position:fixed를 박아주지 않아서 그런가라고 생각해서 id="wrap"으로 div 태그로 감싸주고, 부모 태그에 relative를 박아주었다.

<div id="wrap">
    <div id="top-container">
      <header>명함 관리 페이지</header>
      <main>명함을 관리하는 페이지입니다. 여기에 명함 목록이 표시됩니다.</main>
      <article><BusinessCard /></article>
    </div>
    <footer>&copy; 2024 My Business Cards</footer>
</div>

#wrap {
  position: relative;
}

footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 5rem;
}

하지만 이렇게 하더라도, 부모 태그 기준으로 자식 태그의 위치가 상대적으로 고정되기 때문에, 스크롤의 길이가 길어질 경우 자동으로 아래로 내려가지 않고, 화면 크기 기준으로 하단에 고정되어 버리게 된다.

이를 해결하기 위해 다음과 같은 방법을 사용해보고자 한다.

 

3. transform: translateY(0%)를 사용하여 스크롤 길이에 따라 움직이게 하기

translate() 함수는 기본적으로 X축과 Y축을 따라 지정된 거리만큼 이동시키기 위해서 사용하는 함수이다.

스크롤이 발생하여 화면의 길이가 늘어날 경우, wrap의 padding-bottom의 값을 footer의 길이 만큼 설정을 해줌으로써,
화면 하단에 footer가 들어갈 자리를 마련해준다.

또한 translateY(0%)로 작성하여 가장 하단에 자리 잡을 수 있게 하면, 화면의 길이가 늘어나더라도 화면 하단에 고정이 되도록 설정할 수 있다.

#wrap {
  min-height: 100%;
  padding-bottom: 5rem;
}

footer {
  height: 5rem;
  position: fixed;
  bottom: 0;
  transform: translateY(0%);
}

스크롤이 없는 경우에도, 위로 끌려올라오지 않고 최하단에 footer가 박혀 있음을 확인할 수 있다.