sticky footer bottom (footer 하단에 고정)
.container {
min-height: 100%;
display: flex;
flex-direction: column;
.footer {
margin-top: auto;
}
}-
min-height: 100%
- body > contaier > footer인 경우
- container가 body height 값을 갖고있지 않을 경우가 있음(body보다 작을 경우)
-
margin-top: auto속성으로 자식 요소를 화면 아래에 배치flex item에
margin-top: auto속성을 적용하면 바깥 여백이 flex item을 위쪽에서 아래쪽으로 밀기 때문에 flex item이 아래쪽에 위치하게 된다.