• ベストアンサー

フッターの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

  • css固定したフッターが本文と重なってしまいます

    #all { height:100%; min-height:100%; } #header { left:150px; position:absolute; } .main { top:60px; left:150px; position:absolute; } #footer { left:150px; bottom:0px; position:absolute; } ------------------------------------------------------------- <div id="all"> <div id="header"> ヘッダ部 </div> <div class="main"> メインの記事 </div> <div id="footer"> フッター </div> </div> ============================================================== このように指定したのですが、 ウィンドウを小さくしたり、長い文を書いたりすると、 メインの記事がフッターと重なって読めなくなってしまいます。 記事が短い時は、ページ全体の下部に、 長い時はスクロールした一番下にくるようにしたいです。 テーブルのheight指定を使えば同じような効果は得られますが、 テーブルの無いレイアウトをやってみたかったので。 同じような質問は発見したのですが、いい解答が見つかりませんでした。

    • ベストアンサー
    • HTML
  • スタイルシートのpositionでフッターを位置指定するには

    こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }

  • 『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
  • html?/css?/Javascript? でのフッター特殊な固定方

    html?/css?/Javascript? でのフッター特殊な固定方法について。 こんばんは。 現在ホームページを作成中です。 そこでフッターをブラウザの下部に固定しようと思い google等で検索し見つける事が出来ました。 ソースは色々ありますが例として下記のURLで説明したく思います。 http://www.css-lecture.com/template/2009/0212/ 私の希望・やりたい事としては上記のサイトに追加内容で (1).ヘッダーをブラウザ上部に固定。 (2).ブラウザの上下を縮めた時、フッターとヘッダが重ならないよう、最小高さを指定。 (3).(2)を実装時、フッタとヘッダがある程度寄るとスクロールバーが出てくると思いますが 　 スクロールした時にスクロールするのは内容のみ。 　 (フッタがブラウザ下部に隠れたとしてもスクロール時に移動してはいけない) です。 ここ最近試行錯誤しcssを書いていますが (3)を実装時に不具合が多く困っています。 ヘッダをブラウザ上部に、フッタをブラウザ下部に固定して スクロールした時、内容と同時にフッタまで上にスクロールされたり フッタを完全に固定してしまうと、ヘッダとフッタの最小間隔が指定できなかったり。 【簡易説明】 ヘッダは上部固定、フッタは下部に固定して ヘッダとフッタはブラウザの上下を縮めても重ならない様、最小値を指定し スクロールでスクロールするのは内容・記事のみ。 こんな事が可能なのかどうなのかも私の乏しい知識では判りませんので どなたか詳しい方いらっしゃいましたらご教授お願い致します。 内容・記事としてのスクロールバーと ヘッダ、フッタの最小値以上縮めた時のスクロールバーが入り組んでいる形になるので 不可能なんでしょうか・・・・。 また、もし参考サイト等がありましたら URLの誘導のみでも結構です。 何卒、宜しくお願い致します。（涙 また、乱文で大変失礼致しました。

    • ベストアンサー
    • HTML
  • フッターの位置を一番下に表示させたいのですが・・・

    表示方法について質問をさせてください。 現在、サイトを作っているのですがフッターの表示が上手くいかず悩んでいます。要はフッター部分（ページ最下部）の表示項目を、必ずページの一番下に表示させたいのです・・・。 しかし、今の設定ではコンテンツ量の多い少ないで表示される場所が変わってしまいます。 コンテンツが結構あるページでは、当然一番下に表示されるのでOKなのですが、例えば、空っぽのページでヘッダーとフッターしかない状態だと、ヘッダーのすぐ下にフッターが表示されてしまい、その下に無駄な空間が存在してしまいます。 そうでは無く、コンテンツの量に左右されず、必ずブラウザの画面一番下にフッター部分が表示されるようにしたいのですが、色々と試してみるのですが、出来ませんでした・・・。 サイズなどを指定してしまうと、コンテンツの内容に影響されまた結果が変わってしまいますし、ブラウザによってはバグ的な表示になってしまうので、これはNGでした。 これらを実現するためには、何か特殊な設定をHTML側、またはCSS側で定義しなければならないのでしょうか？ ご存知の方いらっしゃいましたら、是非、アドバイスの程よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 動画を掲載すると最下部のフッターを突き抜ける

    CSS・HTMLでほとほと困っております。 コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。 フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。 このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。 一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。 ブラウザのスクロールバーが出現しているので、スクロールすると、 スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。 そして、フッターの下に動画コンテンツの続きが表示されています。 IE8では、フッターの上に動画コンテンツが重なっています。 Firefoxでは、動画コンテンツの上にフッターが重なっています。 どうすれば直るでしょうか？ ちなみに、以下のサイトの方法を順守して作成しました。 http://www.stylish-style.com/csstec/ultimate/fix-foot.html

    • ベストアンサー
    • CSS
  • Perlでcssを使わないで3カラムにしたい

    現在、Perlでcgiを作成していますが、ページの最上部にヘッダー、ページの両端にメニューや広告、中央にメインコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。 現在、メインコンテンツは完成しております。 cssは、使わないで上記のようなレイアウトをPerlで組みたいのですが、上記にようにしたい場合は、どのように書けば良いのでしょうか？ 横幅全体は800。(ヘッダーとフッターも横幅は800) 左メニュー180、中央メインコンテンツ 440 、右メニュー180 で組みたいと思っています。 お手数をおかけ致しますが、アドバイスよろしくお願い致します。

    • ベストアンサー
    • Perl
  • ヘッダー・フッター固定HTMLに関して

    ヘッダー・フッター固定HTMLに関して ヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。 そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。 ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。 「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、 「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。 【HTML】 ～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～ 【CSS】 ～～～～～～～～ html,body {margin:0;　padding:0;　overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0;　height: 100%;　width: 100%;} body > #flashcontents {height:100％;　position: absolute;} #contents {　position: fixed;　overflow:hidden;　bottom:0;　他サイズなど指定…} ～～～～～～～～ 以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？ よろしくお願い致します。

    • 締切済み
    • CSS
  • フッター固定時のdivの背景について

    フッターを画面下部に固定するため以下のようなHTMLを書きました。 フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。 コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css"> <!-- html, body { height: 100%; margin: 0; padding: 0; text-align: center; } #container { min-height: 100%; height: auto !important; height: 100%; position: relative; } #screen { width: 100%; text-align: left; padding-bottom: 100px; } #contents{ margin: 0 auto; width: 50%; background:Khaki; } #footer { height: 100px; width: 100%; position: absolute; bottom: 0; background-color: #7EC4E6; } --> </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • フッター固定で余白ができます

    footerFixed.js　http://blog.webcreativepark.net/2007/11/16-012253.html　 を使ってhtmlのフッターを下部に固定させてみたところ、コンテンツが少ない量でページの最後にフッターが表示されるようになったのですが、コンテンツがあるコンテナが下部にのびず、背景が見えてしまう状態で尚かつ、コンテンツの最後から妙に大きな空白が開きます。 ブラウザで確認するとウインドウをリサイズすると戻るのですが、原因や対処がまったくわかりません。 どなたかコンテンツをフッターにつけた状態でフッターを下部に表示し、コンテンツが多い場合にはスクロールでフッターが出るようにするにはどのような方法で対応できるでしょうか。どなたかご意見いただければと思います。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する