[CSS] footer 하단 배치하기 (flex-grow 사용)

기본 Layout

import Footer from "@/components/Footer";
import Header from "@/components/Header";

function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  );
}

export default RootLayout;

 

Error나 Loading 중일때, children에 해당하는 content가 없으면, 저렇게 footer가 뷰포트 중간으로 올라와버리는 문제가 발생한다.

 

 

Flex-grow 사용

import Footer from "@/components/Footer";
import Header from "@/components/Header";

function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col min-h-screen">
      <Header />
      <main className="flex-grow">{children}</main>
      <Footer />
    </div>
  );
}

export default RootLayout;

 

div에 min-height를 뷰포트를 꽉차게 만들어주고,

고정값인 header, footer를 제외한 children을 flex-grow값을 사용해 쭉 늘려주면 된다!

 

 

이제 로딩중이나 에러가 발생했을때 헤더가 중앙으로 가는 버그를 해결할 수 있다!