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.
'Web Publishing > HTML&CSS' 카테고리의 다른 글
| 웹프로그래밍의 꽃! 자바스크립트 기초 인프런 강의가 오픈되었습니다. (1) | 2024.12.20 |
|---|---|
| 모바일 기기 감지하는 4가지 방법 (0) | 2019.06.25 |
| 다음 daum Map API 활용하기 (0) | 2019.04.29 |
| 네이버 맵 API 사용하기 (0) | 2019.04.29 |
