• ベストアンサー

フッターのCSSに関して

フッターのCSSの処理でわからず困っています。 やりたいことは以下の通りです。 １．ブラウザが十分に大きい場合は一番下にフッターを置く。 ２．もしブラウザの大きさが取れない場合はフッターの上の部分の終了後にフッターを置きたい。 フッターはposition: absolute;で指定してあるのでブラウザが十分に大きい場合は問題ないのですが、ブラウザを小さくして最表示した場合にフッター部分がメインの部分のところに被ってしまいます。 出来ればメインコンテンツの下部がフッターの上部より下にある場合はメインコンテンツの下にフッターがくる用に修正したいです。

  • CSS
  • 回答数9
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • Enomory25
  • ベストアンサー率100% (4/4)
回答No.4

なんとなくわかった気がします。 質問者さん側のソースを見てないのでなんとも言えないのですが、もしかしたらHTMLタグの構成が以下のようになってませんか？ <div id="screen"> <div id="header">header</div> <div id="menu">menu</div> <div id="container"> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> </div> <div id="footer">footer</div> </div> サンプルの方のソースをみたら以下の様なので、そのままサンプル側のソースを書き写したら正常な動作をしてくれました。 <div id="container"> <div id="screen"> <div id="header">header</div> <div id="menu">menu</div> <div id="contents"> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> testtesttesttesttesttesttesttesttesttesttesttesttest<br> </div> <div id="footer">footer</div> </div> </div> もう一度見なおしてみてください。 もしそうでなければmin-heightなどの指定場所がおかしいのかも知れません。

keeeeeeeen
質問者

お礼

ご指摘ありがとうございました!! まさに<div id="container">でした。 ただ以下の段組ではやはりうまく行きません。 [AAAA]←ヘッダー [B][CC]←コンテンツ [EEEEE]←フッター 以下のパターンではうまくいっています。 [AAAA]←ヘッダー [BBBB]←コンテンツ [CCCC]←コンテンツ [EEEEE]←フッター

すると、全ての回答が全文表示されます。

その他の回答 (8)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.9

この掲示板のシステムの関係で、HTMLソースが正しく表示されていないので、書き直しておきます。 下記は、footerにabsoluteを指定する場合です。fixedの場合はHTMLのbodyは同じですが、スタイルシートはNo.8のものに差し替えてください。(body内はまったく同じです。CSSはごく一部異なります。) ★＿はタブに、：(全角)は:(半角)に戻してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- p{margin:0 1em;text-indent:1em;} blockquote{border:gray 1px dotted;} html,body{margin:0;padding:0;height:100%;} body{line-height:1.4em;} div.article{min-height:100%;position:relative;width:80%;min-width:640px;max-width:900px;margin:0 auto;} div.article div.section{height:auto;padding-bottom:120px;} div.article>div{border:solid 1px gray;} div.article div.footer{position:absolute;height:100px;bottom:0;width:100%;} /* 色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:yellow;} div.footer{background-color:lime;} --> ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>サンプル</h1> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>きちんと理解していきましょう。</p> ＿＿＿<p>スタイルシートの関連項目は、<a href="http：//www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#containing-block%22%3E9.1.2">包含ブロック（Containing blocks）</a>が当てはまるでしょう。</p> ＿＿＿<p>示されたサイトは、マークアップは古いものですね。class名は文書構造を示すもの、idはリンクターゲットなど文書内のひとつの要素を特定する必要があるときと決めておくと、将来デザインを見直すときに絶対的に便利です。</p> ＿＿＿<blockquote cite="http：//www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.4%22%3E"> ＿＿＿＿<p> ＿＿＿＿＿DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ＿＿＿＿</p> ＿＿＿＿<address><a href="http：//www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.4%22%3EThe">global structure of an HTML document (ja)</a></address> ＿＿＿</blockquote> ＿＿＿<p>基本的な考え方は、html,body要素のheightを閲覧領域を基準にして指定します。たったそれだけで良いはずです。シンプルでわかりやすいはずです。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> <!-- ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。(最後)</p> --> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿</div> ＿</div> </body> </html>

すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.8

されたいことがいまひとつ理解できていないのですが、 １．ブラウザが十分に大きい場合は一番下にフッターを置く。 　これは、内容がディスプレイの高さより早く終了してしまう場合は、ディスプレイの最下段に固定して表示させておく。 ２．もしブラウザの大きさが取れない場合はフッターの上の部分の終了後にフッターを置きたい。 　一方、ディスプレイの高さで表示しきれないときは、スクロールさせて全体が読めるようにしたい。 　と言うことですか？ 　だとしたら、あるときは固定されていて、あるときは内容の大きさに追随するという矛盾したスタイルになってしまいます。 　この場合は、率直にfooterは常にディスプレイの最下段に表示させ、本文部分の最低の高さを指定すれば済むのではないですか？？？所詮フッターの後には何もないのですから・・ ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★CSS2 リファレンス - CSS Dencitie ( http://www6.plala.or.jp/go_west/nextcss/ref/index.html ) で検証済みです。 ※子供セレクタを使用していますが、子孫セレクタにしてもよい。(その場合孫の段階で再設定の必要がある。) ※class名は、HTML5の新しい要素を参考にしています。そのままHTML5に変更もできる。 ※タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- p{margin:0 1em;text-indent:1em;} blockquote{border:gray 1px dotted;} html,body{margin:0;padding:0;height:100%;} body{line-height:1.4em;} div.article{height:100%;position:relative;width:80%;min-width:640px;max-width:900px;margin:0 auto;} div.article div.section{min-height:100%;padding-bottom:100px;} div.article>div{border:solid 1px gray;} div.article div.footer{position:fixed;height:100px;bottom:0;width:80%;} /* 色分け */ body{background-color:gray;} div.header{background-color:aqua;} div.section{background-color:yellow;} div.footer{background-color:lime;} --> ＿</style> </head> <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>サンプル</h1> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>きちんと理解していきましょう。</p> ＿＿＿<p>スタイルシートの関連項目は、<a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#containing-block">9.1.2 包含ブロック（Containing blocks）</a>が当てはまるでしょう。</p> ＿＿＿<p>示されたサイトは、マークアップは古いものですね。class名は文書構造を示すもの、idはリンクターゲットなど文書内のひとつの要素を特定する必要があるときと決めておくと、将来デザインを見直すときに絶対的に便利です。</p> ＿＿＿<blockquote cite="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4"> ＿＿＿＿<p> ＿＿＿＿＿DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ＿＿＿＿</p> ＿＿＿＿<address><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4">The global structure of an HTML document (ja)</a></address> ＿＿＿</blockquote> ＿＿＿<p>基本的な考え方は、html,body要素のheightを閲覧領域を基準にして指定します。たったそれだけで良いはずです。シンプルでわかりやすいはずです。</p> ＿＿＿<p>ここに長短様々な段落を入れて表示を確認してください。</p> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿</div> ＿</div> </body> </html>

すると、全ての回答が全文表示されます。
  • Enomory25
  • ベストアンサー率100% (4/4)
回答No.7

＞ただ残念なことにブラウザを小さくすると下のフッター部分が被ってしまいます。 という問いにたいして。 CSS内のpadding-bottomの値を大きくすれば隠れないようにも出来ます。 2カラムについてはボックスをfloatで2つに並べてるだけです。 頑張ってください＾＾

すると、全ての回答が全文表示されます。
  • Enomory25
  • ベストアンサー率100% (4/4)
回答No.6

とりあえず質問者さんの最後の問い？に答えるべく、作るだけ作っては見ましたが こんな感じであってますかね？ contentsにフロートしたブロック要素を置いてあとは縦型のやつと同じやり方で制御してます。 ただはっきりいうと（この2カラムバージョンのやつは）あまり実用性無いと思います。 http://dl.dropbox.com/u/8986926/tst.html ※ソース汚いです。ごめんなさい

keeeeeeeen
質問者

お礼

ありがとうございます!!この形です。 ただ残念なことにブラウザを小さくすると下のフッター部分が被ってしまいます。

すると、全ての回答が全文表示されます。
  • tracer
  • ベストアンサー率41% (255/621)
回答No.5

もうちょっと限定した方がいいですよ。 ブラウザとHTMLと、それぞれのバージョンと。 たとえば、chromeだけを対象にすればとても簡単にできますし、IE6のような古いブラウザを対象にするとかなりめんどいです。HTMLも互換モードか標準モードかどうかで変わってきますよ。

keeeeeeeen
質問者

補足

狐、Chrome、IE７以上、safari、オペラ対応。

すると、全ての回答が全文表示されます。
noname#182841
noname#182841
回答No.3

修正版です。 HTML <div id="footer"><p>ここにコンテンツを書く。</p></div> CSS #footer { clear: both; margin : 0; padding: 0; width: 750px; height: 50px; } #footer p { padding-right: 20px; text-align: right; font-size: 9pt; }

すると、全ての回答が全文表示されます。
noname#182841
noname#182841
回答No.2

HTML <div id="footer">ここにコンテンツを書く。</div> CSS #footer { clear: both; margin : 0; padding: 0; width: 750px; height: 50px; } #footer p { padding-right: 20px; text-align: right; font-size: 9pt; } どうですか?　下に表示されていますか？

keeeeeeeen
質問者

お礼

ありがとうございます。 これだとブラウザが十分に大きい時に一番下にフッターが固定でこないです。

すると、全ての回答が全文表示されます。
  • Enomory25
  • ベストアンサー率100% (4/4)
回答No.1

１．はなんとなくわかりますが、２．については少しわかりづらいですね・・・。 一応作っては見ましたがこんな感じではないですか？ http://dl.dropbox.com/u/8986926/test01.html もしくは、私の考えが合ってるのかはわかりませんが、指定のブラウザheightサイズでは フッターは既定の場所に配置。それ以下のheightサイズであれば画面下についてきて fixedのような動作をする。といった動作はCSSのみでは少し難しいと思われます。

keeeeeeeen
質問者

お礼

ありがとうございます。 ２が少しちがいまして、下記URLの『フッタ固定　スクロールあり（別ウィンドウで表示）』と同じものです。 http://scuderia-web.com/tips/xhtml_css/footer.php 同じように記述しているのですが、なぜかウィンドウを小さくしたらフッターがメイン部分に被ってしまいます。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

注目のQ&A

カテゴリ

OKWAVE コラム

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する