ベストアンサー

フッターのCSSに関して

2012/04/18 14:17

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

keeeeeeeen
お礼率56% (160/282)

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

みんなの回答 （9）
専門家の回答

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

ベストアンサー

Enomory25
ベストアンサー率100% (4/4)

2012/04/18 16:38 回答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などの指定場所がおかしいのかも知れません。

質問者

お礼 2012/04/18 17:03

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

その他の回答 (8)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/04/22 05:17 回答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">  ＿</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>  ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿</div> ＿</div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/04/20 20:13 回答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">  ＿</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)

2012/04/20 17:42 回答No.7

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

Enomory25
ベストアンサー率100% (4/4)

2012/04/18 21:27 回答No.6

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

質問者

お礼 2012/04/20 10:11

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

tracer
ベストアンサー率41% (255/621)

2012/04/18 20:44 回答No.5

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

質問者

補足 2012/04/20 10:11

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

noname#182841

2012/04/18 15:14 回答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

2012/04/18 15:11 回答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; } どうですか?　下に表示されていますか？

質問者

お礼 2012/04/18 15:42

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

Enomory25
ベストアンサー率100% (4/4)

2012/04/18 15:07 回答No.1

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

質問者

お礼 2012/04/18 15:39

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

フッターのCSSに関して