image

footer 하단 고정

태그
Css
상세설명content 높이에 상관없이 footer 하단 고정하기
작성일자2023.10.05

content 높이에 상관없이 footer 하단 고정하는 방법

header, section (content영역), footer 가 main 태그 안에 다 같이 있는 경우

  • html, body 에 height:100% 적용
  • content영역이 브라우저보다 짧은 경우를 위해 main 태그에 min-height: 100% 적용
  • footer absolute 하단 배치 위해 main 태그에 position: relative 적용
  • footer부분이 본문 내용을 가리지 않도록 footer의 height만큼 padding-bottom 적용
  • footer에 position: absolute, bottom: 0 적용

    • html 구조

    <body>
    <main>
      <header>Header</header>
      <section>
		<p>CONTENT</p>
	  </section>
      <footer>Footer</footer>
    </main>
 </body>

    css 적용

    <style>
      html,
      body {
        height: 100%;
      }
      main {
        min-height: 100%;
        position: relative;
		padding-bottom: 60px;
      }
      header {
        width: 100%;
        height: 60px;
      }
      footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
      }
</style>

    이전 포스트

    <pre>태그

    다음 포스트

    emotion 설치 & 사용법