[CSS] position absolute 속성 없이 Footer를 바닥에 고정하려면?

Footer에 position:absolute를 주고, bottom 0으로 고정시키면 Footer를 바닥에 고정시킬 수 있다. 

하지만 위와 같이 화면의 세로 px이 부족하거나 브라우저의 하단을 잡고 끌어올리게 될 경우 Footer가 Section을 잡아먹는 현상이 발생한다. 

따라서 Footer는 화면의 하단을 잡고 끌어올릴 경우, 덮여져야 한다고 생각했다. 

만약 Layout에서 height을 100vh로 줄 경우, 

위와 같이 Footer 아래로 여백이 생기는 현상이 발생한다. 

이를 해결하기 위해서 

Body에 flex를 준 뒤, Section(main)에 flex 1을 주게 되면, Section이 차지하는 비중이 가장 많아지게 되어 화면의 세로 px과 상관 없이 항상 footer가 바닥에 붙어있게 된다.