しかし、ＩＥ６がposition:fixedをサポートしてないため、上手くいきません。
「常に固定配置されるフッター」をＩＥ６で実現させる方法がありましたら教えてください。
ＪＳ利用でも可です。
よろしくお願い致します。
No.1
106
16
18pt
<!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の部分をフッターに変えただけです。
No.2
47258
17pt
DHTML Behavior を使ったやり方を紹介します。
中身は JavaScript ですが、普通に JavaScript をオフにしただけなら有効なはずです。
↓これを fix.htc という名前で保存。
57
55
<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 というのははじめて知りました。
が、ＩＥ６だと、スクロールするたびに、Ｆｏｏｔｅｒに設定している画像を読み込むみたいで、利用としては現実的ではないかなという。感じでした
No.3
20
17pt
jsを利用していいなら、こちらのjsが非常に簡単です。
http://blog.webcreativepark.net/2007/09/29-010711.html
こちらのスプリクトを読み込ませるだけで、position:fixedが使えるようになります。
回答有難うございます。
ですが、ＩＥ７ではfixedどころか、スクロールアウトしてしまい、ＩＥ６では変化ありませんでした。
No.4
533
17pt
Lucky bag::blog: フッタを常に下部に配置
http://www.lucky-bag.com/archives/2005/04/footer.html
もともとのHTML構造が違うと使えないかもしれませんが、JSなしでいけます。
MacIEには未対応と書かれていますが、この記事に対するコメントにも目を通しておくとよいです。
回答ありがとうございます。
元の構造が違うので解りませんが、他の方法でもうまく行かなければ試してみたいと思います。
No.5
47258
17pt
最初のはトリッキーすぎるので、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画像を読み込みそうな気がます。
あたらためて試してみたら書き込みます。
No.6
10616
17pt
<!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">
No.7
20
17pt
> 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では固定されますが。
度々有難うございます。
ですが、やはり常に固定されずに、最下部に張り付いたままでした。
ちなみに、フッターのＣＳＳは
#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 */
です。
ruijio
2007/10/17 11:35:52
GEN111
1
1
2
回答有難うございます。
宣言文が以下の通りですが、こちらでも使えますか？