Rock's Ezweb

footer를 하단으로 고정하는 이유는 컨텐츠의 내용이 많이 않은 경우  푸터가 콘텐츠하단으로 올라와서 아래 부분이 휑하게 비어 보기가 안 좋기 때문이다.

이름 막기위해서 플렉스의 크기가 만들어지는 특성을 이해하면 쉽게 구현할 수 있다. 

[HTML 구조]

<div class="wrapper">
	<header>header</header>
	<div class="main-content">main content</div>
	<footer>footer</footer>
</div>

[ CSS ]

html,body{
	margin:0; padding:0;
	width:100%; height:100%
}

일단 중요한 것은 HTML, BODY가 화면의 높이를 모두 사용하고 있어야 한다는 것이다.

HTML에서 WRAPPER의 높이를 아무리 100%를 주어도 WRAPPER의 부모인 HTML, BODY의 높이가 없으면 화면 높이를 모두 사용하지 못하게 된다. 이때 위와 같이 html, body에 height를 100%를 주면 클래스명 wrapper에서 height를 100%로 하면 높이를 브라우저 화면 높이를 모두 사용한다.  만약 html, body에 높이를 주지 않고 하고 싶다면 아래와 같이 wrapper에서 height를 화면(viewport)의 단위인 100vh를 사용하면 된다.

[ CSS ]

.wrapper{
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.wrapper가 화면을 모두 사용하고 .wrapper안의 첫번째 요소들 즉, header, div, footer 요소들의 정렬을 주축의 방향을 세로로 하는 방식 즉 가로가 아닌 세로로 배열이 되도록 한다.

flex-direction:row(기본값) => 기본값, 박스를 왼쪽에서 오른쪽을 배치, 주축은 가로, 교차축은 세로가 된다.

flex-direction:column => 박스를 위에서 아래로 배치. 주축은 세로 교차축은 가로가 된다. (위 그림을 90도 회전한 것이라 생각하면 된다.)

[ CSS ]

.main-content{
	flex: 1;
}

footer{
	height:60px;
	background: #333;
	color:#fff;
}

핵심은 가운데 영역인 main-content 부분의 크기를 넘치는 속성을 줄이는 속성1, 모자른 속성을 채우는 속성1, 해당 속성을 유지하는 속성 0, flex: 1 1 0을 준다. 줄여서 flex : 1이라고만 하면 된다.

그러면 가운데 영역이 헤더와 푸터를 제외한 나머지 공간을 모두 사용하게되어 결국 푸터가 하단으로 밀리게 된다.

[ 완성본 ]

See the Pen fixed footer v2 - flexbox by Alikerock (@alikerock) on CodePen.