[React] Footer 고정하기

Footer 고정하기

Flex를 이용하기

CSS3 - 87 [ Fixed Footer ] 콘텐츠 양이 짧아도 하단에 푸터 고정하기 2가지 방법, position 활용, Fixed 활용하기
해당 영상에서 footer를 고정하는 두 가지 방법이 나온다. (position fixed로는 왜 안 되는 지도 나와있다.)

1. postion relative
2. flex

본인은 두 가지 방법 중 2번째를 선택해서 진행했다.
(tailwind가 적용되어 있으니 참고하시길 바란다.)

App.js

<div className="App h-full w-full">
	<BrowserRouter>
		<div id="wrapper" className="flex flex-col h-full">
				<Header />
			<div id="main-content" className="flex-1">
			<Routes>
        		<Route>...</Route>
			</Routes>
			</div>
			<Footer />
		</div>
	</BrowserRouter>
</div>

App.css

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

⭐️ height: 100% 대신 height: 100vh 쓰기 ⭐️

근데 위와 같이 작성하면 제대로 배치가 되지 않는다. 뭐가 문제인지 고민을 하다가 여기서 답을 얻었다.
component 내부의 div 높이 설정을 위해선 %(h-full)가 아닌 vh(h-screen)를 사용해야 한다. 따라서 App.js의 코드가 다음과 같이 변경되어야 한다.

<div className="App h-full w-full">
	<BrowserRouter>
		<div id="wrapper" className="flex flex-col h-screen">
				<Header />
			<div id="main-content" className="flex-1">
			<Routes>
        		<Route>...</Route>
			</Routes>
			</div>
			<Footer />
		</div>
	</BrowserRouter>
</div>