본문 바로가기
휴게소

footer 하단에 고정(feat.flex)

by Vintz 2022. 3. 30.
반응형

content의 양이 적을 때 footer를 페이지 가장 아래에 고정 시키는 방법은 여러가지가 있지만 제일 좋은 방법을 알게 됐다. 바로 flex를 이용하는 방법인데 내가 아는 방법 중에는 가장 간단하고 쉽게 해결할 수가 있었다.

  1. html, body에 height: 100%를, body에 display: flex, flex-direction: column 속성을 넣는다.
  2. content 영역에 flex: 1을 주면 끝.

이렇게 하면 뷰포트 크기에 상관없이 footer가 항상 하단에 고정된다.

footer를 하단에 고정시킨 모습

코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Footer 고정</title>
  </head>

  <body>
    <header>
      <h1>헤더</h1>
    </header>
    <main>
      <h1>메인 콘텐츠</h1>
    </main>
    <footer>
      <h1>푸터</h1>
    </footer>

    <style>
      html,
      body {
        height: 100%;
      }

      body {
        display: flex;
        flex-direction: column;

        text-align: center;
        background-color: #999;
        margin: 0;
      }

      main {
        flex: 1;
        background-color: cornflowerblue;
      }
    </style>
  </body>
</html>
HTML
반응형

'휴게소' 카테고리의 다른 글

신입 개발자인 내가 블로그 글을 쓰는 이유  (0) 2022.04.28
피그마 사용법과 협업하기(개발자 시점)  (8) 2022.04.17
VS Code 커서 스타일 및 애니메이션 변경하기  (0) 2022.03.18
개발자가 알아야 할 광고 용어 모음(feat.광고 플랫폼 개발자)  (2) 2022.03.06
신입 프론트엔드 개발자 첫 프로젝트 회고  (6) 2022.03.02

티스토리툴바