display:flex

footer 하단에 고정

by Kim Ara

HTML

<div id="wrap">
  <header>헤더</header>
  <main>내용</main>
  <footer>푸터</footer>
</div>

CSS

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
#wrap{text-align:center;display:flex;flex-direction:column;height:100%}
header{width:100%;height:60px;background:#ddd;}
main{}
footer{width:100%;height:40px;background:#ddd;margin-top:auto}