人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSのposition:fixed を使って、フッター部分を常に固定配置させようと思います。

しかし、IE6がposition:fixedをサポートしてないため、上手くいきません。


「常に固定配置されるフッター」をIE6で実現させる方法がありましたら教えてください。

JS利用でも可です。
よろしくお願い致します。

●質問者: ruijio
●カテゴリ:ウェブ制作
✍キーワード:CSS サポート
○ 状態 :終了
└ 回答数 : 7/7件

▽最新の回答へ

1 ● Q-A
●18ポイント

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

<!--

*{

margin:0;/*お約束*/

padding:0;

}


body {_overflow:hidden;/*ページ全体にbackgroundの場合はbodyに*/

}

#honbun {/*本文 (フッタ以外全部を大囲い。)*/

_overflow:auto;

height:100%;

z-index:2;

}

#footer {

position:fixed;

_position:absolute;

z-index:3;

right:0px;

left:0px;

bottom:0px;

}

-->

</style>

</head>

<div id="footer">フッター文字だけだと透明ですので、バックグラウンドに色をつけて下さい。</div>

<div id="honbun">文字を沢山いれて実験してください</div>

</html>

いわゆる疑似フレームのメニューの部分をフッタに変えてみました。宣言を変えるとうまくいきませんので、互換より標準のほうがいい時は言ってください。

http://www.k5.dion.ne.jp/~i-araki/css/tuki.html

白状するとnaviの部分をフッターに変えただけです。

◎質問者からの返答

回答有難うございます。

宣言文が以下の通りですが、こちらでも使えますか?


2 ● GEN111
●17ポイント

DHTML Behavior を使ったやり方を紹介します。

中身は JavaScript ですが、普通に JavaScript をオフにしただけなら有効なはずです。


↓これを fix.htc という名前で保存。

<public:component xmlns:public="urn:HTMLComponent" lightweight="true">

<attach for="window" event="onscroll" handler="fixFooter" />
<attach for="window" event="onload" handler="fixFooter" />

<script type="text/javascript">
 function fixFooter() {
 var footer = window.document.getElementById('footer') ; // フッターに指定した ID

 if (window.navigator.appVersion.match(/MSIE (\d+)/) && RegExp.$1 < 7) {
 footer.style.position = "absolute" ;
 try { throw (null) ; }
 catch (e) { footer.innerHTML = footer.innerHTML ; }
 }
 }
</script>

</public:component>

HTML には次のように html要素の style 属性を指定します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="behavior:url(./fix.htc)" > <!-- style に behavior 指定 -->
 <head>
 <style type="text/css">
 div#footer { position : fixed ; bottom : 0 ; width : 100% ; } /* 普通に fixed として指定 */
 </style>
 </head>

 <body>
 <div id="contents">コンテンツ</div>
 <div id="footer" >フッタ</div>
 </body>
</html>
◎質問者からの返答

いつも有難うございます。

DHTML Behavior というのははじめて知りました。

が、IE6だと、スクロールするたびに、Footerに設定している画像を読み込むみたいで、利用としては現実的ではないかなという。感じでした


3 ● ametyoko
●17ポイント

jsを利用していいなら、こちらのjsが非常に簡単です。

http://blog.webcreativepark.net/2007/09/29-010711.html

こちらのスプリクトを読み込ませるだけで、position:fixedが使えるようになります。

◎質問者からの返答

回答有難うございます。

ですが、IE7ではfixedどころか、スクロールアウトしてしまい、IE6では変化ありませんでした。


4 ● chankaz
●17ポイント

Lucky bag::blog: フッタを常に下部に配置

http://www.lucky-bag.com/archives/2005/04/footer.html

もともとのHTML構造が違うと使えないかもしれませんが、JSなしでいけます。

MacIEには未対応と書かれていますが、この記事に対するコメントにも目を通しておくとよいです。

◎質問者からの返答

回答ありがとうございます。

元の構造が違うので解りませんが、他の方法でもうまく行かなければ試してみたいと思います。


5 ● GEN111
●17ポイント

最初のはトリッキーすぎるので、3番の回答を参考に少し書き直してみました。

今度のはこちらのファイルには id等を指定する必要は有りません。position : fixed の要素すべてに適用される、はず。


新fix.htc

<public:component xmlns:public="urn:HTMLComponent" lightweight="true">

<attach for="window" event="onload" handler="fixInit" />
<attach for="window" event="onscroll" handler="fixFooter" />

<script type="text/javascript">
 var fixedElements = new Array() ;
 var bottomFixed = new Array() ;

 function fixInit() {
 with (window.document)
 for (var i = 0; i < all.length; ++i)
 if (all[i].currentStyle.position == 'fixed') {
 all[i].style.position = 'absolute' ;
 fixedElements.push([all[i], all[i].offsetTop, all[i].offsetLeft]) ;
 }
 }

 function fixFooter() {
 if (window.navigator.appVersion.match(/MSIE (\d+)/) && RegExp.$1 < 7)
 for (var i = 0; i < fixedElements.length; ++i) {
 fixedElements[i][0].style.top = fixedElements[i][1] + window.document.documentElement.scrollTop + 'px' ;
 fixedElements[i][0].style.left = fixedElements[i][2] + window.document.documentElement.scrollLeft + 'px' ;
 }
 }
</script>

</public:component>
◎質問者からの返答

度々有難うございます。

が、恐らく最初にコメント差し上げたとおり、スクロールの度に、フッターのbackground画像を読み込みそうな気がます。

あたらためて試してみたら書き込みます。


1-5件表示/7件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ