フッター最下部固定/スクロール時も常に最下部に固定させる方法
- Webページのフッターをスクロールしても常に最下部に固定する方法を教えてください。
- 現在のHTMLでフッターを最下部に固定表示していますが、画面のリサイズやスクロール時にずれてしまいます。他のサイトの方法を試しましたが上手くいきません。
- 具体的なHTMLの組み方や挿入位置を教えていただけると助かります。
- ベストアンサー
★★★フッター最下部固定/スクロール時も常に最下部に固定させる方法
【OS】Windws XP HomeEdition 【ブラウザ】InternetExplorer7 【参照URL】http://nowtester.web.fc2.com/tester.html ご覧頂きまして誠に有難う御座います。 皆様のお知恵を貸して頂ければ幸いです。 現在、下記URLの様なHTMLでHPを制作しております。 http://nowtester.web.fc2.com/tester.html 当方の意向として、フッターに該当するコピーライト表記を、 どのサイズのモニターから閲覧しても、 画面最下部に固定表示したいと考えております。 (スクロールが発生した際に見える位置の最下部に常に固定させたい) 現在のページも、一見、開いた際には最下部に固定表示されますが、 画面のリサイズを実施した場合、最下部に固定されていたフッターは、 最初に開いた画面の最下部として表示された位置で固定されており、 スクロール時ズルズルと画面と一緒にズリ上がってしまいます。 別サイト様の過去投稿に参考になりそうなモノが有りましたが、 現在私が書いているHTMLへの実装が上手く行きませんでした。 http://gac.kir.jp/21/13599(りゅう様の最後の投稿) 意図としては↑の様なモノを現在のHTMLに実装出来ればベストですが、 私の挿入位置が悪いのか上手く行きません。 具体的にどの様に書き足せば意図するモノが完成するか、 ソースの組み方を教えて頂けますと幸いです。 因みに、↑投稿のりゅう様が書かれているHTMLだけだと成功しますが、 あくまでも私が現在書いているHTMLに書き足す場合の方法を教えて下さい。 以上、何卒よろしくお願い致します。
- h-tester
- お礼率62% (5/8)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （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で実装出来れば良いのですが…。 解釈違いが御座いましたら大変申し訳有りません。 何かお気づきの点が御座いましたらご連絡頂けますと幸いです。
関連するQ&A
- フッターを最下部に固定する方法
コンテンツが少ない場合でも、 フッターが中途半端な位置にならないように最下部に固定したいと思っています。 といっても常に最下部にしたいわけではなく、 コンテンツが多い場合は画面の外に出るようにしたいのです。 この希望と同じ質問を拝見したのですが解決できませんでした。 どなたかご存知の方、よろしくお願いします。
- ベストアンサー
- HTML
- フッターを固定して、常にどのページでも常に表示
フッターを固定して、常にどのページでも常に表示させる方法について。 今、FC2様の方で、ホームページを作成しているのですが、 フッターを固定して、そのフッターの内容を 常にどのページでも表示させるようにしたいのですが、 (付属の画像のようなスクロールしても常に画面下に表示されるもの) なのですが、 タグ初心者でどのようにすればいいのかよく解りません。 タグはどのようなものが解りやすく出来ますでしょうか？ 後、タグの意味も教えていただけると嬉しいです。 回答宜しくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- フッタを常に下部へ固定しメインコンテンツ部をスクロールさせる方法
現在 http://www.stylish-style.com/csstec/ultimate/fix-foot.html で紹介されている方法を使いフッタを常に最下部へ表示させています。#containerでページを囲み、#mainでフッタのパンディングを確保、 #mainのheightは100%-フッタ用パンディングの30pxとなっています。 #main内にヘッダ、ナビゲーションを上部から順に配置し ナビゲーション以降を#main2としコンテンツ部として表示させようと考えています。 ただ、この方法ではフッタが固定されるもののコンテンツはどんどん下へと伸びてしまいます。 私の考えている表示としては、 (1)コンテンツ部は常にフッタまでボックスを広げる。 (2)コンテンツがoverflowした場合はスクロールする。 この2点をクリアさせたいです。 #main2のheightをピクセルで固定させればできそうですが 解像度の変化に対応できないと思うので… どなたか良い方法を知っている方がいれば教えていただければ幸いです。 htmlとcssは下記URLです。 http://beatprovider.info/test/index.html http://beatprovider.info/test/style_d.css よろしくお願いします。
- 締切済み
- CSS
- 動画を掲載すると最下部のフッターを突き抜ける
CSS・HTMLでほとほと困っております。 コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。 フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。 このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。 一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。 ブラウザのスクロールバーが出現しているので、スクロールすると、 スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。 そして、フッターの下に動画コンテンツの続きが表示されています。 IE8では、フッターの上に動画コンテンツが重なっています。 Firefoxでは、動画コンテンツの上にフッターが重なっています。 どうすれば直るでしょうか？ ちなみに、以下のサイトの方法を順守して作成しました。 http://www.stylish-style.com/csstec/ultimate/fix-foot.html
- ベストアンサー
- CSS
- ヘッダとフッタが固定でコンテンツのみスクロール可能
いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。
- 締切済み
- CSS
- フッターが常に画面最下部に表示されるように
通常ページが縦長の場合フッターはスクロールしないと見えません。 常に画面最下部にフッターを表示するにはどうしたらいいでしょうか・・？ 【条件】 ・フレームは使わない。（SEO対策のため） ・モニターのサイズに関わらず、ブラウザの表示サイズに関わらず常に表示領域の最下部にフッターがくる ・javascriptで追いかけてくる形ではなく下にぴったり（動かずに）表示される ちなみにjavascriptではこのような形です。 http://www.view-bridge.com/sample/ ご存知の方、何か良いアイデアをお持ちの方どうぞお助け下さいませ！！ よろしくお願いします！！
- ベストアンサー
- その他([技術者向] コンピューター)
- html?/css?/Javascript? でのフッター特殊な固定方
html?/css?/Javascript? でのフッター特殊な固定方法について。 こんばんは。 現在ホームページを作成中です。 そこでフッターをブラウザの下部に固定しようと思い google等で検索し見つける事が出来ました。 ソースは色々ありますが例として下記のURLで説明したく思います。 http://www.css-lecture.com/template/2009/0212/ 私の希望・やりたい事としては上記のサイトに追加内容で (1).ヘッダーをブラウザ上部に固定。 (2).ブラウザの上下を縮めた時、フッターとヘッダが重ならないよう、最小高さを指定。 (3).(2)を実装時、フッタとヘッダがある程度寄るとスクロールバーが出てくると思いますが スクロールした時にスクロールするのは内容のみ。 (フッタがブラウザ下部に隠れたとしてもスクロール時に移動してはいけない) です。 ここ最近試行錯誤しcssを書いていますが (3)を実装時に不具合が多く困っています。 ヘッダをブラウザ上部に、フッタをブラウザ下部に固定して スクロールした時、内容と同時にフッタまで上にスクロールされたり フッタを完全に固定してしまうと、ヘッダとフッタの最小間隔が指定できなかったり。 【簡易説明】 ヘッダは上部固定、フッタは下部に固定して ヘッダとフッタはブラウザの上下を縮めても重ならない様、最小値を指定し スクロールでスクロールするのは内容・記事のみ。 こんな事が可能なのかどうなのかも私の乏しい知識では判りませんので どなたか詳しい方いらっしゃいましたらご教授お願い致します。 内容・記事としてのスクロールバーと ヘッダ、フッタの最小値以上縮めた時のスクロールバーが入り組んでいる形になるので 不可能なんでしょうか・・・・。 また、もし参考サイト等がありましたら URLの誘導のみでも結構です。 何卒、宜しくお願い致します。（涙 また、乱文で大変失礼致しました。
- ベストアンサー
- HTML
- HTML5 footer 固定の仕方
ホームページを作っています。 ページはタブで切り替えられるようになっています。 footerを常に表示させたい（画面の下部に固定）と色々やってみましたがうまくいかないので質問します。 <div id="footer"></div> (1)CSS #footer{ position:fixed; } CSSで上のように書いてみました。 文章が少ないときは上に上がり(画面の下に固定されない)、 文章が多くてスクロールが必要なときは、footerが表示されません(要素としては存在しているがつぶれている状態)。 (2)footerFixed.js ページの一番下に表示される（スクロールしないとfooterを見ることが出来ない） という状態です。 なぜなのでしょうか？ 他に方法はないでしょうか？ 教えてください。
- 締切済み
- JavaScript
- 『css/html』フッターを下部＆特殊な移動
こんばんは。 現在Homepageを自分で作成しているのですが 頭が混乱しておりまして・・・、解決策が見つからないのでこちらに質問させていただきました。 結論としましては フッターをある範囲だけ移動(可変)するようにしたい。 現在は ブラウザ上部よりheight：650pxはメインエリアとして情報を記述。 その下にフッター(hright：50px)を配置。 フッターは下部に固定しメインエリアには食い込まない様に設定。 (ブラウザがheight：700px以下になるとスクロールバーが出現しスクロール) ブラウザがheight：700px以上の場合にはメインエリアを延ばして対応。 ここまでの動きはこんな感じです。 http://www.stylish-style.com/csstec/ultimate/sample/fixfoot-sample2.html ここまでは上記のサイト等を調べつつ作成する事が出来たのですがこの後が問題で フッターの最大位置（？）最大下部位置（？）を1000pxに設定し ブラウザが1000px以上になるとフッターの上部は固定され下部が伸びる（若しくは現れる※1） という動作にしたいのですが cssでその様な事が可能なのでしょうか？ 質問文を書くのにも矛盾が生じていると思います。 不可能なら不可能で仕方ないのですが・・・。 何卒、よろしくお願い致します。 ※1. 現れるというのは最初からフッターにheight：500pxくらいの画像を用意し それが見えてくるという意味合いです。
- ベストアンサー
- HTML
- フッター固定で余白ができます
footerFixed.js http://blog.webcreativepark.net/2007/11/16-012253.html を使ってhtmlのフッターを下部に固定させてみたところ、コンテンツが少ない量でページの最後にフッターが表示されるようになったのですが、コンテンツがあるコンテナが下部にのびず、背景が見えてしまう状態で尚かつ、コンテンツの最後から妙に大きな空白が開きます。 ブラウザで確認するとウインドウをリサイズすると戻るのですが、原因や対処がまったくわかりません。 どなたかコンテンツをフッターにつけた状態でフッターを下部に表示し、コンテンツが多い場合にはスクロールでフッターが出るようにするにはどのような方法で対応できるでしょうか。どなたかご意見いただければと思います。
- ベストアンサー
- HTML
お礼
font_color様 ご丁寧にご回答頂きまして誠に有難う御座います！！ 早速試してみた所、無事に意図通りの最下部固定が実装出来ました！ お陰様で1つ問題が解決してホっとしております。 ※しかし別件で、back.jpgを常に画面サイズに対して上下100%指定していた指令は実行されなくなってしまいました。今度はこれを戻す方法を試してみたいと思います※ 本当にご親切に教えて頂けましてとても助かりました。 また別の質問等に関してもお時間が許す限りお力を貸して頂けますと幸いです。 以上、よろしくお願い致します。