하단고정레이아웃
페이지 정보
작성자 MintState 댓글 0건 조회 7,807회 작성일 16-07-01 14:30본문
하단고정레이아웃
CSS 이용하여 하단고정레이아웃을 만들어 보자.
CSS 이용하여 하단고정레이아웃을 만들어 보자.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <title>하단고정레이아웃</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> html { overflow: hidden; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } #wrapper{ width: 100%; height: 100%; position: absolute; overflow-y:scroll; } #content { width: 100%; padding-bottom:50px; } #footer { background-color:#eeeeee; overflow: hidden; position: absolute; bottom: 0; height: 50px; width:100%; text-align: center; margin-left:0px; margin-bottom:-1px; } </style> </head> <body> <div id="wrapper"> <div id="content"> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용... <BR> 본문내용END<BR> </div> </div> <div id="footer"> 풋터내용 </div> </body> </html>
|
댓글목록
등록된 댓글이 없습니다.