문제 상황
데이터를 로드하는 과정 혹은 콘텐츠가 없을 때, 푸터가 화면의 중간까지 올라온다. 사용자에게 일관적인 UI를 제공하기 위해 콘텐츠의 길이가 짧을 때에도 푸터를 항상 화면 아래에 고정하는 방향으로 수정했다.
Next.js 및 Tailwind 구현 코드
📌 Next.js 및 Tailwind를 기준으로 설명한다.
/* globals.css */
html,
body {
min-height: 100vh; ✅ 화면 전체 높이 확보
}global.css파일에서html, body에min-height: 100vh를 추가한다.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<body className="flex flex-col min-h-screen"> ✅
<Header />
<main className="flex-1"> ✅
{children}
</main>
<Footer /> ✅
</body>
</html>
);
}RootLayout의body에flex flex-col min-h-screen를 추가한다.children에flex-1을 추가한다.Footer는body안의 마지막 요소에 위치한다.
푸터 하단 고정 원리
화면 전체 높이를 기준으로 요소를 세로로 쌓고, 콘텐츠가 남은 공간을 다 차지하게 해서, 푸터를 맨 아래에 붙게 만든다!
body에 flex flex-col min-h-screen
flex-col: 세로로 정렬 (Header → main → Footer 순서)min-h-screen: 최소 높이를100vh로 잡음 → 화면 전체 높이 확보- 세로로 정렬하면서 화면만큼의 높이를 가진
flex box구현
main에 flex-1
flex-1: 남은 공간 전부 차지- 즉, 고정 높이를 가지는
Header와Footer를 제외한 남은 공간을main이 전부 차지한다. - 콘텐츠 길이에 상관없이
main이 남은 공간을 차지해서,body의 마지막 요소인Footer가 항상 화면 화단에 위치할 수 있다.
| 요소 | Tailwind 클래스 | 역할 설명 |
| html, body | min-h-screen |
화면 전체 높이 확보 |
| body | flex flex-col min-h-screen |
세로 정렬 + 높이 확보 |
| main | flex-1 |
남은 공간 다 차지 (Footer 아래로 밀림) |