CSS 페이지 스크롤시 푸터를 고정시키기

페이지 스크롤시 푸터를 고정시키기

페이지를 스크롤을 할 때 아래의 내용을 위로 올리면 푸더는 계속 아래에 고정되게 하려면 position:fixed를 이용한다.

<style>

div#footer {

background-color: #02c7ea;

/*하단 고정*/

        width: 100%;

position: fixed;

bottom: 0;

left: 0;

}

ul.nav {

float: left;

list-style: none;

width: 45%;

}

ul.nav li {

float: left;

}

ul.nav a {

line-height: 40px;

color: #FFFFFF;

padding: 0 15px;

text-decoration: none;

}

</style>

<div id="header">하단고정 상단</div>

<div align="center">하단고정 내용</div>

<div id="footer">

<div align="center">

<ul class="nav">

<li><a href="#">회사소개</a></li>

<li><a href="#">제품정보</a></li>

<li><a href="#">기술정보</a></li>

<li><a href="#">게시판</a></li>

<li><a href="#">공지사항</a></li>

</ul>

</div>

</div>