[CSS] 페이지의 하단에 footer 고정 시키기

 하단에 footer 고정

 

https://m.blog.naver.com/PostView.nhn?blogId=eggtory&logNo=220744380205&proxyReferer=https%3A%2F%2Fwww.google.com%2F

페이지의 하단에 footer 고정 시키기

 

position:fixed를 사용하면 컨텐츠 양에 상관 없이 항상 브라우져 하단에 고정되어 있는 footer를 보게 됩니다.

컨텐츠 양이 많을 경우 컨텐츠가 끝나는 지점에 footer를 고정시키기 위해서는 아래와 같이 심플한 소스를 사용하시면 됩니다.

 

<div id="wrapper">
    <div id="header">header</div>
    <div id="container">나는 container입니다.
 </div>
 <div id="footer">footer</div>
</div>

html,
body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
    position:relative;
    min-height:100%;
}
#header {
    height:70px;
    background:#ccc;
}

#container {
  	padding:20px;
}

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:70px;   
    background:#ccc;
}