しかし、IE6がposition:fixedをサポートしてないため、上手くいきません。
「常に固定配置されるフッター」をIE6で実現させる方法がありましたら教えてください。
JS利用でも可です。
よろしくお願い致します。
<!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の部分をフッターに変えただけです。
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に設定している画像を読み込むみたいで、利用としては現実的ではないかなという。感じでした
jsを利用していいなら、こちらのjsが非常に簡単です。
http://blog.webcreativepark.net/2007/09/29-010711.html
こちらのスプリクトを読み込ませるだけで、position:fixedが使えるようになります。
回答有難うございます。
ですが、IE7ではfixedどころか、スクロールアウトしてしまい、IE6では変化ありませんでした。
Lucky bag::blog: フッタを常に下部に配置
http://www.lucky-bag.com/archives/2005/04/footer.html
もともとのHTML構造が違うと使えないかもしれませんが、JSなしでいけます。
MacIEには未対応と書かれていますが、この記事に対するコメントにも目を通しておくとよいです。
回答ありがとうございます。
元の構造が違うので解りませんが、他の方法でもうまく行かなければ試してみたいと思います。
最初のはトリッキーすぎるので、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画像を読み込みそうな気がます。
あたらためて試してみたら書き込みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
html,body {
height: 100%;
overflow: hidden;
}
#honbun {
overflow:auto;
height:100%;
position: relative;
}
#footer {
position:absolute;
z-index:1;
right:0;
left:0;
bottom:0;
}
-->
</style>
</head>
<body>
<div id="footer">フッター文字だけだと透明ですので、バックグラウンドに色をつけて下さい。</div>
<div id="honbun">文字を沢山いれて実験してください</div>
</body>
</html>
>宣言文が以下の通りですが、こちらでも使えますか?
の以下が無いので勝手に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
でやってみました。もし、違ったら、コメント欄空けてください。
すみません。コメントに宣言文が入れられませんでした。
一応、以下の通りですが、上記のもの、試してみたいと思います。
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> 3 です。
えっと
http://www.doxdesk.com/software/js/fixed.html
のfixed.jsファイルを置いて
<!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="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title></title> <script type="text/javascript" src="fixed.js"></script> <style type="text/css"> <!-- div#footer { position: fixed; bottom: 10px; } --> </style> </head> <body> <p> あああああああああ<br /> いいいいいいいいい<br /> (適当な長さ) </p> <div id="footer"> この部分がbottomより上10pxで固定されます。 </div> </body>
このような記述で実現できませんでしょうか?
当方IE6では固定されますが。
度々有難うございます。
ですが、やはり常に固定されずに、最下部に張り付いたままでした。
ちなみに、フッターのCSSは
#footer {
clear:both;
width:100%;
position:fixed;
/*_position:relative;*/
bottom:1px;
left:0;
float:left;
height:41px;
background:url(../img/footer_bg.jpg) repeat-x;
text-align:left;
filter: alpha(opacity=85);
-moz-opacity:0.85; /* FF NN */
opacity:0.85 ; /* Opera Safali FF */
です。
回答有難うございます。
宣言文が以下の通りですが、こちらでも使えますか?