🌕 [스프링 게시판] 푸터(footer) 하단 고정

@3/16/2023

푸터(footer)

•

사이트 바닥에 붙은 정보 카드를 footer라고 부름

•

쉬워보이면서도 은근히 까다로운 footer (사실 모든 CSS가 다 그런 것 같다)

◦

인터넷에 있는 대부분의 정보가 개인적으로 적용이 잘 안 됐음

◦

이런저런 조사와 실험 끝에 적용에 성공한 케이스를 기록함

•

footer에게 기대하는 요건은 아래와 같음

◦

항상 바닥에 붙은 상태로 보임

◦

단, 본문이 길어지면 아래로 밀려나며 스크롤 안으로 숨음

•

우리가 일반적으로 기대하는 footer의 동작 예시

또는

구현

<html>

<head>
    <style>
        header, section, footer {
            border: 1px solid gray; /* 확인용 */
        }

        * {
            margin: 0; /* 필수는 아님 */
        }

        body, html{
            height: 100%;
        }

        header {
            height: 100px; /* header 높이, 임의 지정 */
						position: relative;
            z-index: 1;
        }

        section {
            box-sizing: border-box;
            min-height: 100vh;
						padding-top: 100px; /* header 보금자리 */
            padding-bottom: 100px; /* footer 보금자리 */
            transform: translateY(-100px); /* header 높이 만큼 이동 */
        }

        footer {
            height: 100px; /* footer 높이, 임의 지정 */
            transform: translateY(-200px); /* section이 올라간 높이 + 본인 높이 만큼 이동 */
        }
</head>

<body>
    <header>header</header>
    <section>section</section>
    <footer>footer</footer>
</body>

</html>
HTML
복사

•

body, html

◦

height: 100%: section과 footer를 위쪽으로 이동(transform)시킨 후 하단에 공간이 남지 않도록 함

•

header

◦

position: relative: z-index를 적용시키기 위해 static position을 해제

◦

z-index: 1: transform을 통해 올라온 section의 padding이 header를 덮어버려서 버튼 클릭이 안 되는 현상을 해결

•

section

◦

box-sizing: border-box: padding이 높이 계산에 포함되지 않도록 함

◦

min-height: 100vh: 최소 높이를 지정해 본문이 작더라도 footer가 딸려올라오지 않도록 막음

▪

vh는 브라우저 창 기준 퍼센티지로 높이를 지정하는 속성

◦

padding-top: 100px: header가 들어올 보금자리를 마련함

◦

padding-bottom: 100px: footer가 들어올 보금자리를 마련함

◦

transform: translateY(-100px): section을 header 높이만큼 이동시켜 header를 품음

•

footer

◦

transform: translateY(-200px): footer를 section의 패딩 안으로 이동시킴

결과

•

본문이 작을 경우

◦

착한 푸터는 바닥에 잘 붙어 있다

◦

아래처럼 화면을 줄여도

◦

얌전히 따라 올라오는 순종적인 푸터

•

본문이 클 경우

◦

본문이 길어지자 스크롤 최하단으로 자리를 비킨 예의바른 푸터