Footer 화면 고정

프로젝트를 할 때 footer가 있는건 아주 흔하다.
그런데 footer가 내맘처럼 바닥에 딱 붙어있지 않는 경우도 흔하다 ..

내가 원하는건

• footer가 화면 맨 밑에 고정되어 있는 것
• 만약 footer 위 요소들이 화면 전체를 꽉채우지 못할정도여도 화면의 맨 밑에 고정되어있는 것
• 만약 footer 위 요소들이 너무 길어 스크롤해서라도 footer가 맨 밑에 고정되어있는 것

여기서 2가 잘 안되는 경우가 많다.

그래서 간단하게 해결법을 적어놓으려고 한다.

나는 router를 RootLayout으로 정의해놓았다.

const RootLayout = () => {
  return (
    <>
      <Wrapper>
        <Content>
          <Header />
          <Modal />
          <Outlet />
        </Content>
        <FooterRight />
      </Wrapper>
    </>
  );
};

이때 FooterRight가 밑에 고정시키고 싶은 Footer다.

Footer style 정의

Footer의 가장 상위 style을

  position: absolute;
  bottom: 0px;
  height: 3rem;

이렇게 설정해준다. height는 본인의 프로젝트에 맞게 설정한다.

Content style 정의

그 후 footer 위에 들어갈 상위 요소들의 스타일을 다음과 같이 지정한다.

  padding-bottom: 3rem;

footer의 height값과 동일하게 맞춰준다.

이렇게 하면 footer가 내 마음에 쏘옥 들게 하단 고정될 것이다!