- ベストアンサー
フッターを最下部に固定する方法
コンテンツが少ない場合でも、 フッターが中途半端な位置にならないように最下部に固定したいと思っています。 といっても常に最下部にしたいわけではなく、 コンテンツが多い場合は画面の外に出るようにしたいのです。 この希望と同じ質問を拝見したのですが解決できませんでした。 どなたかご存知の方、よろしくお願いします。
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> 常に最下部にしたいわけではなく、コンテンツが多い場合は画面の外に出るようにしたいのです。 「画面の外」？というのがちょっと謎の表現でうが、これはつまり、現在のウィンドウサイズの中でウィンドウの最下部に固定位置で常にフッターが見えている（フッターがそこでFIX）、というわけではなく、<body>内の最下部で見えていればよい、ということですね？ レイアウト上の制約もありますので、質問者様が適用したいサイトのスタイルに合致するかどうかわかりませんが、下記など参考になるのでは？ http://www.stylish-style.com/csstec/ultimate/fix-foot.html
関連するQ&A
- ★★★フッター最下部固定/スクロール時も常に最下部に固定させる方法
【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に書き足す場合の方法を教えて下さい。 以上、何卒よろしくお願い致します。
- ベストアンサー
- HTML
- 動画を掲載すると最下部のフッターを突き抜ける
CSS・HTMLでほとほと困っております。 コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。 フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。 このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。 一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。 ブラウザのスクロールバーが出現しているので、スクロールすると、 スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。 そして、フッターの下に動画コンテンツの続きが表示されています。 IE8では、フッターの上に動画コンテンツが重なっています。 Firefoxでは、動画コンテンツの上にフッターが重なっています。 どうすれば直るでしょうか？ ちなみに、以下のサイトの方法を順守して作成しました。 http://www.stylish-style.com/csstec/ultimate/fix-foot.html
- ベストアンサー
- CSS
- ヘッダー・フッター固定でコンテンツのみ可変
高さが固定されているヘッダーとフッターをウィンドウの上と下に固定したままで、その間のコンテンツ部分のみを縦方向に可変にする方法は考えられるでしょうか。つまり、 （ヘッダー＋コンテンツ＋フッター）の高さの合計＝ウィンドウの高さ が常に成り立つ方法です。framesetでrowを指定すれば話は早いんですが、XHTMLで実現したいので使えません。 Javascriptを使ってウィンドウの高さを計算してからコンテンツ部分の高さを指定する方法もありますが、その場合はウィンドウのサイズを変えてしまうとヘッダーとフッターがウィンドウに連動せずに画面外や中途半端なところに残ってしまうので、それもだめかなと思いました。 とりあえずコンテンツ部分はどんなに高さが小さくなってもいいので、かなりウィンドウの高さが小さくても、常にヘッダーとフッターがきちんとウィンドウの上下に固定され、コンテンツ部分が可変になるような方法がありましたら教えてください。 ------------------------------- ヘッダー（固定） ------------------------------- コンテンツ（可変） ※この部分のみにスクロールバーが現れることができる。 ------------------------------- フッター（固定） -------------------------------
- 締切済み
- HTML
- フッター固定で余白ができます
footerFixed.js http://blog.webcreativepark.net/2007/11/16-012253.html を使ってhtmlのフッターを下部に固定させてみたところ、コンテンツが少ない量でページの最後にフッターが表示されるようになったのですが、コンテンツがあるコンテナが下部にのびず、背景が見えてしまう状態で尚かつ、コンテンツの最後から妙に大きな空白が開きます。 ブラウザで確認するとウインドウをリサイズすると戻るのですが、原因や対処がまったくわかりません。 どなたかコンテンツをフッターにつけた状態でフッターを下部に表示し、コンテンツが多い場合にはスクロールでフッターが出るようにするにはどのような方法で対応できるでしょうか。どなたかご意見いただければと思います。
- ベストアンサー
- HTML
- フッタを常に下部へ固定しメインコンテンツ部をスクロールさせる方法
現在 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
- XHTML+CSSでフッターを下部に固定させるには？
http://www.hddx.net/hc2/_index.html ※CSSファイル http://www.hddx.net/hc2/includes/main.css 上記のようなサイトを制作しており、フッター画像をウィンドウサイズに関わらず、下部に固定させようとしています。 下部に固定させ、ウィンドウサイズの変更にも対応できたのですが、 ウィンドウの縦幅をどんどん狭くしていくと、フッター画像が上のコンテンツにかぶっていってしまいます。 http://www.lucky-bag.com/archives/2005/04/footer.html http://www.stylish-style.com/csstec/ultimate/fix-foot.html 上記サイトを参考にしたのですが、どうしてもうまく対応しません。 どなたかお分かりでしたらご教授頂きたいと思います。 宜しくお願い致します。
- 締切済み
- HTML
- フッターの固定方法
コンテンツが短い場合でもフッターを画面の一番下に固定させたいのですが、うまくできません。 http://thai-kosiki.net/list/list-osaka-hokubu.htmlのページでは画面の一番下にくるのですが、 http://thai-kosiki.net/list/list-osaka-seibu.htmlのページではフッターが上に上がってしまいます。 検索で「フッター固定」と調べて、 #readに「Padding Bottom 105px」を設定したり、div#footerに「Position absolute」や「bottom 0px」を設定したりいろいろ試したのですが、ひとつのページがうまくできても、違うページがぐちゃぐちゃになったり…。うまくいきません。 アドバイスをお願いします。どうぞよろしくお願いします。
- 締切済み
- CSS
- 『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
- HTML5 footer 固定の仕方
ホームページを作っています。 ページはタブで切り替えられるようになっています。 footerを常に表示させたい（画面の下部に固定）と色々やってみましたがうまくいかないので質問します。 <div id="footer"></div> (1)CSS #footer{ position:fixed; } CSSで上のように書いてみました。 文章が少ないときは上に上がり(画面の下に固定されない)、 文章が多くてスクロールが必要なときは、footerが表示されません(要素としては存在しているがつぶれている状態)。 (2)footerFixed.js ページの一番下に表示される（スクロールしないとfooterを見ることが出来ない） という状態です。 なぜなのでしょうか？ 他に方法はないでしょうか？ 教えてください。
- 締切済み
- JavaScript
- ボーダーの伸縮とフッターの位置について
私のブログの個別記事にて まず、記事を囲んでいるボーダーなんですが、アドセンス（Ads by Google）までしか囲んでいません。 これをコメント欄まで囲むようにしたいと思っております。 続いて、フッターの位置なんですが、個別記事の場合、フッターが中途半端な位置にあり、サイドバーを突き抜けて見づらくなっております。 これを最下部に持っていきたいと思っております。 どちらかでいいので、カスタマイズの方法を御願い致します。
- 締切済み
- HTML
お礼
回答ありがとうございます。 提示していただいたサイトを参考にしてみたところうまく表示することができました。 希望通りです、ありがとうございました。