- 締切済み
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 上記サイトを参考にしたのですが、どうしてもうまく対応しません。 どなたかお分かりでしたらご教授頂きたいと思います。 宜しくお願い致します。
- cheese0084
- お礼率60% (27/45)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- key-child
- ベストアンサー率54% (25/46)
> <ul id="inq"> > <li id="inq"> 重複している。 > <a name="business"> 閉じてない。というかh3要素にid属性振ればいいのでは？ > html { > height: 100%; > body { > height: 100%; > div#container { > height: 100%; > <body> > <h1>株式会社○○○○</h1> > <div id="container"> h1要素はcontainer内になければならのでは？ > body > #container { > div#container { 出現順が逆。参考にしたサイトを確認。 contents内に下記を追加。 #contents { overflow: auto; }
関連するQ&A
- 『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
- 動画を掲載すると最下部のフッターを突き抜ける
CSS・HTMLでほとほと困っております。 コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。 フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。 このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。 一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。 ブラウザのスクロールバーが出現しているので、スクロールすると、 スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。 そして、フッターの下に動画コンテンツの続きが表示されています。 IE8では、フッターの上に動画コンテンツが重なっています。 Firefoxでは、動画コンテンツの上にフッターが重なっています。 どうすれば直るでしょうか？ ちなみに、以下のサイトの方法を順守して作成しました。 http://www.stylish-style.com/csstec/ultimate/fix-foot.html
- ベストアンサー
- CSS
- フッタを常に下部へ固定しメインコンテンツ部をスクロールさせる方法
現在 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
- html?/css?/Javascript? でのフッター特殊な固定方
html?/css?/Javascript? でのフッター特殊な固定方法について。 こんばんは。 現在ホームページを作成中です。 そこでフッターをブラウザの下部に固定しようと思い google等で検索し見つける事が出来ました。 ソースは色々ありますが例として下記のURLで説明したく思います。 http://www.css-lecture.com/template/2009/0212/ 私の希望・やりたい事としては上記のサイトに追加内容で (1).ヘッダーをブラウザ上部に固定。 (2).ブラウザの上下を縮めた時、フッターとヘッダが重ならないよう、最小高さを指定。 (3).(2)を実装時、フッタとヘッダがある程度寄るとスクロールバーが出てくると思いますが スクロールした時にスクロールするのは内容のみ。 (フッタがブラウザ下部に隠れたとしてもスクロール時に移動してはいけない) です。 ここ最近試行錯誤しcssを書いていますが (3)を実装時に不具合が多く困っています。 ヘッダをブラウザ上部に、フッタをブラウザ下部に固定して スクロールした時、内容と同時にフッタまで上にスクロールされたり フッタを完全に固定してしまうと、ヘッダとフッタの最小間隔が指定できなかったり。 【簡易説明】 ヘッダは上部固定、フッタは下部に固定して ヘッダとフッタはブラウザの上下を縮めても重ならない様、最小値を指定し スクロールでスクロールするのは内容・記事のみ。 こんな事が可能なのかどうなのかも私の乏しい知識では判りませんので どなたか詳しい方いらっしゃいましたらご教授お願い致します。 内容・記事としてのスクロールバーと ヘッダ、フッタの最小値以上縮めた時のスクロールバーが入り組んでいる形になるので 不可能なんでしょうか・・・・。 また、もし参考サイト等がありましたら URLの誘導のみでも結構です。 何卒、宜しくお願い致します。（涙 また、乱文で大変失礼致しました。
- ベストアンサー
- HTML
- CSSが動かない
http://www.stylish-style.com/csstec/ultimate/css-roll-2.html このサイトにCSSのプルダウンメニューが紹介されていますが、プログラムをコピーしてHTMLファイルにペーストしても、動作しません。 具体的には、最初のメニューは表示されますが、マウスを乗せてもプルダウンメニューが出てきません。 まったく同じような http://www.stylish-style.com/csstec/ultimate/css-roll-1.html これは動作するのですが、なぜ上のほうは動作しないのでしょうか？ 原因など分かる方、教えてください。
- ベストアンサー
- その他（プログラミング・開発）
- フッター固定で余白ができます
footerFixed.js http://blog.webcreativepark.net/2007/11/16-012253.html を使って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に書き足す場合の方法を教えて下さい。 以上、何卒よろしくお願い致します。
- ベストアンサー
- HTML
- フッターの位置固定で他のdivの高さを可変させたい
上から順に #header #contener #footerとdivが３つあるとして、 ブラウザのサイズをかえたときに、 #footerを最下部に固定したまま #contenerのheightを可変させたいです。 （overflow-yはautoで） 最適なCSSを、どなたかご教示願います。
- 締切済み
- CSS
- HTML5 footer 固定の仕方
ホームページを作っています。 ページはタブで切り替えられるようになっています。 footerを常に表示させたい（画面の下部に固定）と色々やってみましたがうまくいかないので質問します。 <div id="footer"></div> (1)CSS #footer{ position:fixed; } CSSで上のように書いてみました。 文章が少ないときは上に上がり(画面の下に固定されない)、 文章が多くてスクロールが必要なときは、footerが表示されません(要素としては存在しているがつぶれている状態)。 (2)footerFixed.js ページの一番下に表示される（スクロールしないとfooterを見ることが出来ない） という状態です。 なぜなのでしょうか？ 他に方法はないでしょうか？ 教えてください。
- 締切済み
- JavaScript
- このCSSの貼り付け方について。
http://www.lucky-bag.com/archives/2005/04/footer.html このCSSは設置したいテキストに貼りつけるのでしょうか？ それとも別に新しいテキストを作って貼りつけるのでしょうか？ このCSSの貼り付け方法も教えていただけると嬉しいです。 回答宜しくお願い致します。
- 締切済み
- ホームページ作成ソフト
