footer(바닥글) 맨 아래에 붙게하기

문제 발생

footer를 설정하였는데,이상하게 어떤 부분에서는 footer가 제대로 맨 아래에 붙지만, 만약 main content가 양이 적으면 footer 다음에도 빈 구역이 붙는 모습을 확인할 수 있었다.

원하는 구조

실제 화면 구조

문제 해결

APP에서 처음 구조를 wrapper div로 해더와 메인 컨텐츠 footer를 묶어주었다. 그리고 메인컨테츠의 경우 처음 시작 tag를 section으로 만들어 주었고, footer는 footer tag로 제작해주었다.(tag는 본인이 원하는 방식으로 설정하면 된다.)

<div class="wrapper">
		<TopHeader />
		<RouterView />
		<BottomFooter />
	</div>

그래서 common.css를 따로 만들어서 전체적으로 css를 적용해주었다. 해당 코드는 아래와 같다.

.wrapper {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

section {
	flex: 1;
}
footer {
	height: 100%;
}

section을 flex:1로 잡아주고 height는 100%로 설정해주었다. wrapper의 경우에도 위와 같이 설정해주었더니 제대로 footer가 원하는 구조로 만들 수 있었다.