[CSS] Footer 하단에 고정 시키기

728x90

여러 footer 고정 시키는 로직을 구글링을 통해 찾아봤지만, 뭔가 이상하였다..

특히 display: flex,absolute 위 2개를 사용한 방법 또한 보였다...

위 방법 추천한 사람은 진짜....후 본인 프로젝트에도 꼭 이것만 사용하길 바란다..

또 다른 방법으로는 BootStrap, Bottom:0 주는 방법등 여러가지가 있었지만, 뭔가 내 프로젝트에는 맞지 않았다ㅠㅠ

그래서 내가 알아 보던 중 다행히 나한테 딱 맞는 방법이 있었고 그 방법은 아래와 같다.

[Html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="head">
    Header
</div>

<div class="wrap">
  Body
</div>

<footer>
    footer
</footer>
</body>

[CSS]

<style>
    .head {
        height: 50px;
        background: cadetblue;
    }

    .wrap{
        min-height: calc(100vh - 10rem); /* footer 높이를 빼준다. */
        background: gray;
    }
    footer{
        height: 10rem; /* footer 높이 */
        background: wheat;
    }

</style>

[결과]

혹시라도 뭔가 높낮이가 맞지 않으면 CSS 에서 body 부분을 min-height 안에 calc() 함수 안에 수치를 조절하거나

footer 에서 height 를 조절하면 될 것이다.

[Ref]

https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b

728x90

[Ref]

티스토리툴바