티스토리 툴바

Daum
Tistory
로그인

마성의 휩월드

Html·Css·Js

[CSS] 푸터 바닥에 붙이기(Sticky Footer)

2010/08/07 10:04



푸터가 브라우저의 세로 사이즈에 상관없이 바닥에 딱 붙도록 만드는 CSS.
오랜만에 들어가보니 코드가 살짝 달라진 것 같기도 하고…
원본글은 요기를 클릭하세요 : )


@HTML
<div id="wrap">
    <div id="main">
    </div>
</div>

<div id="footer">
</div>


@CSS
html, body {height:100%;}
html, body, form, #wrap {height: 100%;} /* 닷넷일 경우 */

#wrap {min-height:100%;}
#main {overflow:auto;
       padding-bottom:150px;}  /* footer의 높이값과 동일해야 함 */
#footer {position: relative;
         margin-top:-150px; /* footer 높이만큼 마이너스 */
         height:150px;
         clear:both;}

/*opera fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}


@페이지 상단에 조건문 추가(IE6 및 하위버전만 타는 스타일)
<!--[if !ie 7]>
    <style type="text/css">
        #wrap {display:table; height:100%}
    </style>
<![endif]-->


난 헤더와 푸터를 랩바깥으로 빼는 스타일이라… 그 상태 그대로 적용했더니 안먹힌다 T_T
헤더는 랩안으로 밀어넣어요 @_@ 쏘오오옥~



'Html·Css·Js' 카테고리의 다른 글

Doctype에 따른 렌더링 모드  (0) 2010/10/11
HTML5의 위엄  (0) 2010/08/16
[CSS] 푸터 바닥에 붙이기(Sticky Footer)  (2) 2010/08/07
[jQuery] form.submit()  (0) 2010/07/14
[JS] Javascript Shorthands!  (0) 2010/07/07
[CSS] CSS Shorthands!  (0) 2010/07/05
tag , , ,
Trackback-  .  COMMENT 2
  1. 길꽁 2012/03/29 09:57  ADDR  MOD.DEL  REPLY

    여쭤볼게있는데여...ㅜㅜ 홈페이지 제작하는데...배경이미지 바로 밑에 푸터가 있어야 되는데 푸터를 고정시키면 푸터가 배경을 먹고 고정이되요 이부분 어떻게 해결해야하나여/?ㅜㅜ

    • Favicon of http://hyvaa.tistory.com 휩 2012/04/01 00:54  ADDR  MOD.DEL

      배경이미지가 풀사이즈 no-repeat 인가요-? 푸터가 배경을 먹고 고정된다는 게 무슨 말씀인 지….
      먹는 높이만큼 마진을 줘도 안되나요-?

PREV    1 ... 677 678 679 680 681 682 683 684 685 ... 702    NEXT