- カタチグラフィックスのBlog – Katachigfxの日記と制作メモ

10.29

フッターの位置を固定して常に表示 (IE6対応)

Published 10月 29th, 2009 Posted in html・CSS No Comments »  

最近、このブログにも登場!ウィンドウ下部から離れたくないフッター。
そんな愛嬌いっぱいのフッターを作る方法を紹介します。

CSSはこう

html,body {
height:100%;
}
html {
overflow-y:scroll;
}
div#footer {
position:fixed;
bottom:0;
width:100%;
}

/* IE6 */

* html,
* html body {
overflow-y:hidden;
}
* html div#main {
height:100%;
overflow-y:scroll;
}
* html div#footer {
position:absolute;
bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}

IE6対策としてハックを使用。*htmlを頭に付けるとIE6のみにスタイルを当てられる。

htmlはこう

<body>
  <div id="main">
    中身。。。。。
    <div id="footer">
      フッター部分
    </div>
  </div>
</body> 

以上

–制作メモ

ご自由にどうぞ