Footer에 position:absolute를 주고, bottom 0으로 고정시키면 Footer를 바닥에 고정시킬 수 있다.
하지만 위와 같이 화면의 세로 px이 부족하거나 브라우저의 하단을 잡고 끌어올리게 될 경우 Footer가 Section을 잡아먹는 현상이 발생한다.
따라서 Footer는 화면의 하단을 잡고 끌어올릴 경우, 덮여져야 한다고 생각했다.
만약 Layout에서 height을 100vh로 줄 경우,
위와 같이 Footer 아래로 여백이 생기는 현상이 발생한다.
이를 해결하기 위해서
Body에 flex를 준 뒤, Section(main)에 flex 1을 주게 되면, Section이 차지하는 비중이 가장 많아지게 되어 화면의 세로 px과 상관 없이 항상 footer가 바닥에 붙어있게 된다.
'React.js' 카테고리의 다른 글
| [React] Orval Codegenerator를 사용한 Swagger -> React-Query 코드 자동생성 (0) | 2023.02.13 |
|---|---|
| [React] Cross-Domain Request 시 set-cookie가 되지 않는 이슈 [Same-Site:Strict] (0) | 2023.01.10 |
| [React] 디자인패턴(MVC, Flux, MVVM)과 전역 상태 관리, 서버 상태 관리 (0) | 2022.12.12 |
| [React] Ant Design DatePicker(RangePicker)와 Moment.js를 사용한 날짜별 필터링 기능 구현 (0) | 2022.09.29 |
| [React] React-Query useMutation Hook 사용 시 비동기 처리Issue (0) | 2022.09.23 |