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


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


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

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

回答の条件
  • 1人2回まで
  • 登録:2007/10/10 08:24:18
  • 終了:2007/10/17 08:25:14

回答(7件)

id:Q-A No.1

Q-A回答回数106ベストアンサー獲得回数162007/10/10 10:24:09

ポイント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の部分をフッターに変えただけです。

id:ruijio

回答有難うございます。

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

2007/10/10 22:40:10
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582007/10/10 13:26:16

ポイント17pt

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>
id:ruijio

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

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

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

2007/10/10 22:38:51
id:ametyoko No.3

ametyoko回答回数2ベストアンサー獲得回数02007/10/10 14:08:27

ポイント17pt

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

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

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

id:ruijio

回答有難うございます。

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

2007/10/10 22:37:12
id:chankaz No.4

chankaz回答回数53ベストアンサー獲得回数32007/10/10 16:43:58

ポイント17pt

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

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

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

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

id:ruijio

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

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

2007/10/16 00:42:08
id:GEN111 No.5

GEN111回答回数472ベストアンサー獲得回数582007/10/10 21:10:31

ポイント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>
id:ruijio

度々有難うございます。

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

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

2007/10/16 00:43:54
id:Q-A No.6

Q-A回答回数106ベストアンサー獲得回数162007/10/10 23:41:01

ポイント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">

でやってみました。もし、違ったら、コメント欄空けてください。

id:ruijio

すみません。コメントに宣言文が入れられませんでした。

一応、以下の通りですが、上記のもの、試してみたいと思います。

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2007/10/16 00:45:14
id:ametyoko No.7

ametyoko回答回数2ベストアンサー獲得回数02007/10/11 11:53:00

ポイント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では固定されますが。

id:ruijio

度々有難うございます。

ですが、やはり常に固定されずに、最下部に張り付いたままでした。

ちなみに、フッターの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 */

です。

2007/10/16 00:46:22
  • id:ruijio
    追記です。

    fixed.jsを置く方法ですが、IE6とFireFoxでは上手く行きましたが、IE7だと固定されずスクロールになってしまいます。

    また進展ありましたら書き込みます。
  • id:GEN111
    position : fixed に補助処理が必要なのは IE7 未満だけですから、次のようにすればいいのでは。

    <!--[if lt IE 7.0]>
    <script type="text/javascript" src="fixed.js"></script>
    <![endif]-->

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません