감성 퍼블리셔 html,css

footer가 항상 최하단에 붙어있기 (HTML/CSS) 본문

HTML/CSS

footer가 항상 최하단에 붙어있기 (HTML/CSS)

빅범 2013. 10. 21. 19:11

footer가 항상 최하단에 붙어있기 (HTML/CSS)

출처 : http://blog.naver.com/parkgaya?Redirect=Log&logNo=130120356744

 

 

 

종종 어떤 홈페이지에 footer가 항상 촤하단에 붙어있는 경우를 보게 된다.
(예 http://mail.naver.com, http://me.naver.com/index.nhn   등 로그인페이지)
창의 크기에 상관없이 그리고 창의 크기가 변화하여도 항상 최하단에 고정되어서 움직입니다.

 

 

 

 

<!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">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Footer 하단밀착</title>
  <style>
   div.Index   {width:300px; text-align:center; margin:0px auto; padding:0px; background-color:#09C; border-bottom:5px solid #000;}
   div.Index div.Text {width:200px; margin:0px auto; padding:0px; background-color:#9C3;}
   div.Footer   {width:100%; height:20px; margin:0px; padding:0px; text-align:center; background-color:#090;}
  </style>
 </head>

 <body style="margin:0px; padding:0px;">
  <div class="Index" id="Index">
   <div class="Text">콘텐츠 시작<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />여기까지</div>
  </div>
  <div class="Footer" id="Footer">COPYRIGHT</div>
  <script>
   // 반드시 본문 내용 중에 id : Index, Footer가 있어야 함.
   var Height_Index = Number(document.getElementById("Index").clientHeight); // Min-Height를 지정해 주기 위해 기존 Default Height를 저장
   window.onload  = changeContentSize;          // Window 창 로드시
   window.onresize  = changeContentSize;          // Window 창 크기를 조정할때마다
   function changeContentSize() {
    var Height_Window   = Number(document.documentElement.clientHeight);   // Window 창 높이
    var Height_Footer   = Number(document.getElementById("Footer").clientHeight); // Footer 높이 구하기
    var ContentTop = Height_Window - Height_Footer - 5;          // 5 = Margin + Padding + Border of Top, Bottom
    document.getElementById("Index").style.minHeight = Height_Index + 'px';     // Index에 Min-Height 적용
    document.getElementById("Index").style.height = ContentTop + "px";      // Index 높이 변경
   }
  </script>
 </body>
</html>

 

 

 

 

원하는 기능은 메뉴/컨텐츠/푸터로 나누고
메뉴 / 푸터를 제외한 부분만큼 스크롤 없이 화면에 꽉 차있고
푸터는 늘 화면 하단에 위치

 

 

 

 

 

 

 

일단 스타일 시트부분을
기존에 만들어진 페이지들에 쓰이는 클래스 네임을 바꿔서
 #Top   {width:1280px; height:115px; text-align:left; margin:0px auto;  background-color:red;}
 #Container  {width:100%; text-align:center; margin:0px auto; background-color:#09C; border-bottom:5px solid #000;}
 #Contents  {width:1280px; height:auto; text-align:left; margin:0px auto; padding:0px; border:1px #9C3 solid;}
 #Footer   {width:100%; height:100px; margin:0px; padding:0px; text-align:center; background-color:#090;}

요렇게 정리를 하구,  자바스크립트 부분에 top메뉴에 관련된 부분을 추가하면 됩니다.

 

 

 

 

 

 

 

 

저작자표시

'HTML/CSS' 카테고리의 다른 글

임시 인터넷 파일캐싱을 위한 방지 html,css,javascript  (1) 2013.11.11
css display none과 block 속성 이해하기 [html/css]  (0) 2013.10.22
웹 색상표, 컬러값  (0) 2013.10.07
[HTML] CSS로 onfocus=this.blur() 효과주기  (0) 2013.10.07
[CSS3] background-size 속성 사용법  (0) 2013.10.04
'HTML/CSS' Related Articles more
Comments