- ベストアンサー
フッター最下部固定/スクロール時も常に最下部に固定させる方法
- Webページのフッターをスクロールしても常に最下部に固定する方法を教えてください。
- 現在のHTMLでフッターを最下部に固定表示していますが、画面のリサイズやスクロール時にずれてしまいます。他のサイトの方法を試しましたが上手くいきません。
- 具体的なHTMLの組み方や挿入位置を教えていただけると助かります。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
「要素の下に表示」ということでは違うみたいですね。 「常に画面の下」に表示させるのは「position:fixed;」を使用します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <!--[if lt IE 7]> <script type="text/javascript" src="unitpngfix.js"></script> <![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>テスト中</title> <style type="text/css"> <!-- *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #FFFFFF; } html{ overflow-y:scroll; } div#maincontents{ background-image: url(image/back.jpg); } .img1{ text-align:cenetr; } .img2{ position:absolute; top:-84px; text-align:cenetr; } .img2 img{ border:none; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; filter:dropshadow(color=#999999,offX=1,offY=1); } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1); } --> </style> </head> <body> <div id="maincontents"> <div class="img1"><img src="back.jpg" /></div> <div class="img2"> <img src="back-trans.png" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="16,25,245,208" href="★★★" target="_blank" /> </map> </div> </div> <div id="footer"> コピーライト表記＠フッター固定 </div> </body> </html> これでどうでしょうか？
その他の回答 (1)
- font_color
- ベストアンサー率45% (24/53)
かなり試行錯誤されたみたいで・・HTMLがごちゃごちゃなので少し整理しました。 ※必要な要素が良く分からないので後はご自分で足してください。 【HTML】 <div id="maincontents"> <div class="contents"> <div class="img1"><img src="back.jpg" /></div> <div class="img2"> <img src="back-trans.png" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="16,25,245,208" target="_blank" /> </map> </div> </div> <div id="footer"> コピーライト表記＠フッター固定 </div> </div> 【CSS】 html,body { background-color: #000000; width:100%; height:100%; padding:0; margin:0; color: #FFFFFF; } #maincontents { position: relative; height: 100%; min-height: 100%; width:100%; background-image: url(image/back.jpg); background-repeat: no-repeat; } body>#maincontents{ height:auto; } .contents{ padding-bottom: 20px; } .img1{ text-align:cenetr; } .img2{ text-align:cenetr; position:absolute; top:-84px;←※1 } .img2 img{ border:none; } #footer { background:#555; position:absolute;bottom:0; height:20px;←※2 width:100%; text-align:center; margin:0px; filter:dropshadow(color=#999999,offX=1,offY=1); } ※1元の数値の意味が分かりませんでした。調整してください。 ※2調整してください。 ちなみにですが、 ＞スクロールが発生した際に見える位置の最下部に常に固定させたい とは「要素の下に表示」ということですよね？ 「常に画面の下に表示」ということならやり方が変わってきます。
補足
font_color様 重ねてご回答下さいまして誠に有難う御座います。助かります。 そうですね…自分でもかなりカオスなHTMLになっていると思います; 整理して頂けて勉強になります。どうも有難う御座います。 本件に関しては、要素の下と言うよりも、 やはり画面最下部表示…と言う方が誤解が無い様に思います。 参考画像を追加させて頂きましたが、画像の様に、 一度全画面で開いているブラウザをリサイズし、 自動で上下スクロールバーが表示された際、 下にスクロールするのと同時に最下部に有ったコピーライト表記も一緒にズリ上がってしまう為、 これを常に目で見て画面の最下部に固定させられればと思いました。 (フレームを利用せずに) ページ全体はスクロールしても、フッターだけは最下部の位置から動かさない様にしたいと思っております。単純に私の頭の中のイメージですと、 大きなページの上に位置固定レイヤーを乗せ2重表示させている様な感覚のモノになれば良いのかな…とか考えてますが、無謀でしょうか。 質問の中に記載させて頂いたフォーラムで紹介されている方法が、 今の私のHTMLで実装出来れば良いのですが…。 解釈違いが御座いましたら大変申し訳有りません。 何かお気づきの点が御座いましたらご連絡頂けますと幸いです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
font_color様 ご丁寧にご回答頂きまして誠に有難う御座います！！ 早速試してみた所、無事に意図通りの最下部固定が実装出来ました！ お陰様で1つ問題が解決してホっとしております。 ※しかし別件で、back.jpgを常に画面サイズに対して上下100%指定していた指令は実行されなくなってしまいました。今度はこれを戻す方法を試してみたいと思います※ 本当にご親切に教えて頂けましてとても助かりました。 また別の質問等に関してもお時間が許す限りお力を貸して頂けますと幸いです。 以上、よろしくお願い致します。