문제 상황
데이터를 로드하는 과정 혹은 콘텐츠가 없을 때, 푸터가 화면의 중간까지 올라온다. 사용자에게 일관적인 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 아래로 밀림) |
