[CSS] footer 하단에 고정 시키기

컨텐츠 양이 화면보다 길면 괜찮지만 짧을 때 푸터가 컨텐츠 바로 밑에 붙어서 모양이 안이쁠 때가 있다. 

푸터는 말그대로 화면 하단에 붙어있어야 푸터 같기 때문이다(?) ㅋㅋㅋㅋㅋ

그럴때를 위해서 footer를 하단에 붙여보자..

 

 

 

 

display: flex 를 이용하기(ie11이상)

 

https://jsfiddle.net/Kimara/wg8dtaLz/6/

 

요점은 감싸는 박스에 display:flex; flex-direction:column; 을 주는 것과,

감싸는 박스의 높이값이 정해져 있어야 한다는 것이다.

그러면 그 전체적인 높이 안에서 footer에 margin-top:auto 를 줘서 위에 마진을 주는 것이다.