Footer 하단고정

📌 footer 하단고정

✏️ 1. fixed

position: fixed;
bottom: 0;

fixed 의 경우 footer가 바디 컨텐츠를 가리게 되어 fail

✏️ 2. absolute

position: absolute;
bottom: 0;

스크롤이 없으면 정상적인것처럼 보이나 스크롤이 생기는 순간 위치가 고정되어 footer가 이상하게 나온다.

✏️ 3. flex

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Wrapper>
        <Header />
        <div className="contentWrapper">
          <Component {...pageProps} />
        </div>
        <Footer />
      </Wrapper>
    </>
  );
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;

  .contentWrapper {
    flex: 1;
  }
`;

바디에 flex: 1을 주어 내용이 없어도 꽉차게 만들고 footer도 자연스럽게 나옴