Skip to main content

[CSS] footer 항상 하단에 고정 시키기

· One min read

htmml​

<html>
  <body>
    <div class="wrap" style="min-width:1400px;">헤더 및 본문 내용</div>

    <div class="footer">Footer</div>
  </body>
</html>

css​

html {
  position: relative;
  min-height: 100%;
  margin: 0;
  background: yellow;
}

body {
  min-height: 100%;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: white;
  background: blue;
}

적용 결과​

See the Pen footer-bottom by gloria (@gloriaJun) on CodePen.