TIL

Sticky Footer

2019.12.101분 읽기

.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이 아래쪽에 위치하게 된다.


관련 포스트

Giscus 댓글 영역 (GitHub Discussions 연동 예정)