- ベストアンサー
CSS 背景色が下まで伸びません
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞<div="wrapper">があり、その中に ＞<div="main">,<div="menu">を左右にfloatさせています。 この構造だと、#mainと#menuのfloatによって#wrapperの中には「高さを持つ要素が存在しない」ことになっているのは分かっていますか？ floatプロパティの基本知識なので、もし知らなかったなら調べておいてください。 んで、質問者さんと同様の悩みは既に先人が経験していまして、clearfixという技術があります。 https://www.google.co.jp/search?q=css+clearfix まあ見てもらったら分かりますが、#wrapperの末尾にclear:bothなブロック要素を突っ込んで、中身が全部floatしてても親要素が高さをキープできるようにするという小技です。 やっていることはごく簡単なのですぐに導入できると思います。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ブロック要素は、それが含まれる直近のstaticでない親コンテナブロックの内寸を参照します。 ⇒9.1 視覚整形モデル概論( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#q1 ) 例えばHTML4.01strictでブラウザが標準モードで動作するなら、 <body> <div class="article"> <div class="header"> </div> <div class="section"> <div class="nav"> </div> <div class="footer"> </div> </div> </body> という文書構造だとします。 スタイルシートは・・ html,body{margin:0;padding:0;height:100%;width:100%;} /* とルート要素の高さを指定しておきます。*/ div.article{ width:80%;min-width:640px; margin:0 auto; min-height:100%;position:relative; padding:5px; } div.article div.nav{ position:absolute; height:100%;width:200px; top:0;left:0; padding:0; } div.article div.header,div.article div.section,div.article div.footer{ margin-left:210px; } くらいでよいです。全文は・・ ★スマホの640px～幅広ディスプレイに対応(ウィンドウ幅を伸縮して確認) ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) のDATA入力(右上)で確認済みのHTML4.01strictwです。CSSは2.1 ★class名は、文書構造を示す物にしてあります。 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 HTML5にするときは、それぞれ<article><section><header><footer><nav>になります。 『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』 ★目次もページの高さに合います。 ★タブは＿に置換してあるので戻す。 <!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"> <!-- html,body{margin:0;padding:0;height:100%;width:100%;} /* とルート要素の高さを指定しておきます。*/ div.article{ width:80%;min-width:640px;max-width:1000px; margin:0 auto; min-height:100%;position:relative; padding:5px; } div.article div.nav{ position:absolute; height:100%;width:200px; top:0;left:0; padding:0; } div.article div.header,div.article div.section,div.article div.footer{ margin-left:210px; } /* 分かりやすいように色分け */ body{background-color:gray;} div.article{background-color:white;} div.header{background-color:aqua;} div.section{background-color:silver;} div.article div.nav{background-color:yellow;} div.article 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>記事・・・・・</p> ＿＿＿<p>適当に増やして・・確認</p> ＿＿＿<p>記事・・・・・</p> ＿＿＿<p>記事・・・・・</p> ＿＿＿<p>記事・・・・・</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h2>ナビ</h2> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<h2>文書情報</h2> ＿＿</div> ＿</div> </body> </html>
お礼
相当ご丁寧にご説明いただいた事感謝いたします。 ありがとうございました。
関連するQ&A
- CSSで背景色を下まで表示させたい
左がメニュー、右がメインコンテンツになるサイトを作っています。 左右のボックスの背景色を下まで伸ばしたいのですが、 いろいろなサイトを見て回って、その通りに指定しているはずなのですが、 うまく行きません。 #layoutの中に#sidebarと#mainを入れ子にしてあります。 #layoutの背景色（完成後は背景色はなしにする予定）は下まで表示されますが、 #sidebarと#mainの背景色が下まで表示されません。 また、ブラウザの縦幅をすごく短くしてスクロールした時に、 #layoutの背景色がその縦幅より下は表示されなくなってしまいます。 今まではテーブルで作っていて、CSSとXHTMLを使うのは初めてです。 以下にソースを置いておきますので、ご回答よろしくお願いします。 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> <head> <title>背景画像を下まで表示したい</title> <style type="text/css"> *{ margin:0;padding:0; } html{ height:100%; } body{ margin: 0px; padding: 0px; height:100%; background-color:#DDDDDD; text-align:center; font-size: 11px; line-height:18px; font-family: sans-serif; color: #000000; } /*レイアウト指定*/ #layout{ margin: 0px auto; width: 960px; height:100%; min-height:100%; text-align:left; background-color:#000000; } body > #layout { height: auto; } #main{ float:right; margin:0px; padding:50px 34px 0px 34px; width:640px; height:100%; min-height:100%; background-color:#FFFFFF; } #sidebar{ float:left; margin:0px; padding:40px 30px 0px 0px; width:218px; height:100%; min-height:100%; background-color:#999999; } /*クリア*/ .clear { clear:both; } .clear hr { display:none; } /*罫線指定*/ .borderA { border-bottom:solid 1px #888888; margin-top:37px; margin-bottom:10px;} </style> </head> <body> <div id="layout"> <div id="main"> メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br />メインコンテンツ<br /> <p class="borderA"></p> <p>Copyright(C) xxxxxxxxxxx. All Rights Reserved.</p> </div> <div id="sidebar"> メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br />メニュー<br /> </div> </div> <div class="clear"><hr /></div> </body> </html>
- 締切済み
- HTML
- CSSレイアウト(2列型)に関して
お世話になります。2列の左列がメインで右列がサイドバーというCSSレイアウトに関してご質問します。 以下のような構造のCSSレイアウトを作成しました。 body | |-- #wrapper | | | |-- #content | | | | | |-- #main | | | | | |-- #sidebar body { background: yellow; } #wrapper { width:700px; background: white; } #content { width: 700px; background: white; } #main { float: left; width: 500px; background: white; } #sidebar { float: right; width: 200px; background: blue; } ※padding: 0;margin: 0;を実際には全てに追加してあります。 ----- 以下HTMLファイル ----- <body> <div id="wrapper"> <div id="content"> <div id="main"> <p> ・・・・・・ </p> </div> <div id="sidebar"> <p> ・・・・・・・ </p> </div> </div> </div> </body> 上記においてIE6ではメイン(#main)の高さがサイドバー(#sidebar)の高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。※Firefox1.07で試しています。 メイン(#main)やサイドバー(#sidebar)の高さを指定していないためと考えますが、メイン及びサイドバー共に高さを可変にするため固定値を設定したくない場合は、FirefoxでIEのように#contentの背景色(白)を反映するにはどうすればよいのでしょうか。 質問が長くなりましたが、手がかりでもつかめればと思っています。どうぞ宜しくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- CSSの背景の指定
２つのブロック要素を左右に分けて表示しようとしましたが、#contentの内容と#naviの内容が大きさに差がある場合に背景が透けてしまうのですがどうすればよいでしょうか？ 僕の予想では、#main_contentの背景が適用されると思ったのですがうまく機能していないみたいです。ここには書いていませんが、bodyに背景画像を入れていて、その画像がボックス内に出てしまうという感じです。 #naviや#contentにheightを指定してやると#main_contentの背景が余白の部分にちゃんとくるのですが、そのページごとにどちらが長くなるか予想できないので余った部分にきちんと指定した色がくるようにしたいです。 (ここでは便宜的に背景色を３色別々にしています。本来はすべて#fffにしようと思っています。) #main_content { background-color: #ff0; } /*content*/ #content { float: right; width: 512px; background-color: #f0f; } #content_inner { } /*navi*/ #navi { float: left; width: 256px; background-color: #0ff; } #navi_inner { }
- ベストアンサー
- HTML
- 背景色が表示されない＞＜
下記のように設定していますが、背景色が表示されません。 解決方はありますでしょうか？ 【html】 <div id="header"> <div id="h_contents"> <div id="h_left_pr"> ｄｄｄx </div><!-- h_left_pr --> <div id="h_wrapper"> <div id="right_top_area"> テキストリンクエリア </div><!-- right_top_area --> <div id="h_main_box"> <div id="h_main_left"> ロゴエリア </div><!-- h_main_left --> <div id="h_main_right"> <div id="h_search_area"> サーチエリア </div><!-- h_search_area --> <div id="h_map_area"> マップエリア </div><!-- h_map_area --> </div><!-- h_main_right --> </div><!-- h_main_box --> </div><!-- h_wrapper --> </div><!-- h_contents --> <div style="clear:both "></div> </div><!-- header --> 【css】 #header{ width:100%; background-color:black; } #h_contents{ width:1240px; margin:0 auto; } #h_left_pr{ float:left; width:120px; background-color:red; } #h_wrapper{ float:right; width:1000px; margin:0 120px 0 0; padding:0; background-color:blue; } #h_wrapper{ >margin:0 60px 0 0; } #right_top_area{ clear:both; float:right; background-color:green; width:350px; } #h_main_box{ clear:both; background-color:yellow; } #h_main_left{ float:left; width:200px; background-color:purple; } #h_main_right{ float:right; width:800px; background-color:orange; } #h_search_area{ clear:both; float:left; width:500px; background-color:gray; } #h_map_area{ float:right; width:300px; background-color:darkblue; }
- ベストアンサー
- HTML
- 背景に影をつける方法（CSS）を教えてください。
以前からやりたかったメインの背景の左右に影をつける方法にチャレンジしているのですが、IE6だけ少しうまくいきません・・・ やり方としてはメイン（wrapper）のボックスに＋影の幅（左＋右）のwidthを指定して、左右の影の幅分を左右それぞれにpaddingを指定しています。 その中をヘッダー＋2カラムで構成しているのですが、IE６だけ右側部分のpaddingが2倍？になっているのか、おさまりきらず下に回り込んでしまいます。 その他のブラウザでは左右に2カラムが表示されています。 これはIE6のバグの一種でしょうか？ これの解決方法を教えていただけないでしょうか？ <div id="main" class="clearfix"> <div id="header"> </div> <div id="left"> いいいいいいいいいいいいいいいいいいいいいいい </div> <div id="right">aああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div> </div> body { font-size: 12px; margin: 0px; padding: 0px; height: auto; width: 100%; text-align: center; position: absolute; line-height: 150%; background-image: url(img/bg.gif); float: left; } #main { text-align: left; width: 910px; margin-top: 0px; margin: 0px auto; ; ; background-image: url(img/main-bg.gif); padding: 0 10px 0 10px; } #left { text-align: left; float: left; width: 210px; margin-left: 0px; padding: 10px 0 10px 0; } #right { width: 700px; float: right; }
- ベストアンサー
- HTML
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- CSSだけで奇麗にサイトを作りたい。
Mac Golive CS2を使っています。 大体以下のような形でCSSを記述しています。（他の文字やマージン等細かい設定は省いてます） 自分のイメージとしては灰色の背景に、メインの白い箱があってその中に左右に小箱が並んで入ってる感じです。 CSS : body { background-color: #999; } #main { background-color: white; width: 700px; height: auto; } #left { width: 200px; height: auto; float: left;} #right { width: 500px; height: auto; float: right;} HTML : <body> <div id="main"> <div id="left">左の内容</div> <div id="right">右の内容</div> </div> </body> そこで質問なのですが、上記の場合、mainの縦がautoになっているdivの中にleftやright等のdivを入れるとmainからleftなどがはみ出てしまうのです。（というかmainのdivが表示すらされない。なぜ？） divは入れ子が出来ないのでしょうか？現在どうしてもこの形で作りたいのでleftとrightの箱をtableで代用していますが、tableは使いたくありません。 あとmainの箱にleftなどの箱の大きさの分だけ<br>をたくさん入れるという方法がありますがそれもやりたくありません。 わかりにくい質問かもしれないのですが助言の程頂けましたら有り難いです。
- ベストアンサー
- ホームページ作成ソフト
- CSSを使って、背景色をブラウザの縦100％につづかせたいです。
こんにちは。おせわになります。 CSSを使って、左側に同じ背景色がブラウザの縦いっぱいにつづき、 右側に、たくさんの文字や画像をのせるレイアウトをしたいと思ってます。 しかし、どうやっても左の背景が縦100％になりません。 右のテキストの量が少なければ、問題ないのですが、多いとむりです。 グーグルなどでも調べましたが、どうしてもわからないです。 とてもこまってます。よろしくお願いします。 （ソース例の「たくさんの文字」というところには、多くの文字と写真が入ります。） --------------------------- CSS↓ html{ height:100%; } body{ height:100%; width:100%; } .b1 { background-color: #333333; height: 100％; width: 100px; float: left; } .b2 { background-color: #99CC33; height: 100%; width: 200px; float: left; } BODY内↓ <div class="b1">文字</div> <div class="b2"> たくさんの文字</div>
- 締切済み
- ホームページ作成ソフト
- レイアウトが崩れます
汚いソースで失礼します。 メニューとコンテンツとサブメニューがありますが この３つの高さを保つにはどうしたらいんでしょうか？ コンテンツ部分の高さが長いと メニューとサブメニューの高さは短いままで ダサい感じなんです。 なんとご説明したらいいのやら（汗 コンテンツ部分が長くてもメニューとサブメニューの高さを自動に設定させるようにするには、どうしたら良いのでしょうか？ ご教授願います HTMLのソース＋CSSです↓ <html> <body> <div class="wrapper"> <div class="header"> ヘッダーになります<br> </div> <div class="main"> <div class="menu"> menu<br> menu<br> menu<br> menu<br> menu<br> menu<br> </div> <div class="contents"> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> コンテンツになります<br> </div> <div class="submenu"> サブメニューはこちらです<br> サブメニューはこちらです<br> </div> </div> <div class="footer"> フッター<br> </div> </div> </body> </html> CSS .wrapper { width: 900px; margin: 0 auto; line-height: 1.5; } /* メイン*/ .main { width: 900px; } /* ヘッダ*/ .header { width: 900px; height: 200px; background-color: #66FFFF; background:url(img/top2.jpg) ; } /* Menu*/ .menu { width: 150px; float: left; background-color: #FFFF99; } /*コンテンツの設定*/ .contents { float: left; width: 600px; background-color: white; } /*SubMenuの設定*/ .submenu { float: left; width: 150px; height: 300px background-color: #66FF66; } /* 下の設定 */ .footer { clear: both; width: 900px; border-top: 1px dotted gray; height: 20px; text-align: center; font-size:0.7em; background-color:black; }
- ベストアンサー
- HTML
- CSSが悪いんでしょうか？
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。 IE6だけでこのような現象が出ています。 ※手元のデータは外部リンクです。 -----ソース----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body {background: #EFEFEF;} #wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;} #header{border: 3px solid #333;} #nav{float: left; width: 150px;} #nav ul{margin:0; padding:0; list-style-type:none;} #nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;} #nav li a:hover{background-color:#FF9900; color:#000000;} #rightbox{padding:0 5px; width: 140px;} #main{border:4px solid #FF0000; float: right; width: 542px;} #footer{background-color:#CCC; clear: both;} </style> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="nav"> <ul> <li><a href="#">nav1</a></li> <li><a href="#">nav2</a></li> <li><a href="#">nav3</a></li> </ul> </div><!-- end nav --> <div id="main"> <h2>main</h2> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> </div><!-- end main --> <div id="footer"> footer </div><!-- end footer --> </div><!-- end wrapper --> </body> </html>
- ベストアンサー
- HTML
お礼
うまくいかない理由をご解説いただき すっきりしました。 ご指示通りでうまくいきました。 ありがとうございました。