TIL : min-height를 이용해 footer 화면 아래 고정

<참고한 사이트>

min-height:100% 를 이용해서 footer를 화면아래에 고정하기

 

 

위의 블로그를 보면서 따라 해 봤다.

 

하면서 몇 가지 궁금한 점이 생겼는데,

margin: -50px 0 -50px 0; 부분이 없으면 레이아웃 사이에 틈이 생기는 이유

컨테이너가 min-height: 100%로 설정되어 있어서, 화면의 전체 높이를 차지하려고 한다.  이것과 관련이 있는 것 같은데 먼가 이해가 정확하게 되지 않는다..

왜지?!?!!

 

footer이 맨 아래에 위치할 수 있게 되는 이유는 알겠다.

헤더가 맨 위에 위치하고, 컨테이너는 헤더 바로 아래에 위치한다.

컨테이너가 min-height: 100%로 설정되어 있으니  화면 전체를 차지하려고 하고 이로 인해 푸터가 밀려서 화면 하단에 위치하게 되는 것.

화면 전체가 800px라고 치면 헤더와 푸터의 높이 100px를 빼고 700px 만큼 차지하려는 것. 

 

🌱 공간이 생기는 이유를 이해하지 못했다. 질문하기!! 🌱 min-height 관련 내용 정리하기