プロが教えるわが家の防犯対策術！

CSS　背景色が下まで伸びません

解決済

  • 質問者：hayaken73
  • 質問日時：
  • 回答数：2件

<body>の中に
<div="wrapper">があり、その中に
<div="main">,<div="menu">を左右にfloatさせています。

<div="wrapper">で囲ってある部分のbackground-colorを
白にしたいのですが、白が下までのびず、<body>の
背景色がそこに出てしまいます。

どうしたら良いのでしょうか？

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

＞<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してても親要素が高さをキープできるようにするという小技です。
やっていることはごく簡単なのですぐに導入できると思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

うまくいかない理由をご解説いただき
すっきりしました。

ご指示通りでうまくいきました。

ありがとうございました。

通報する
お礼日時：2013/09/08 14:34

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　ブロック要素は、それが含まれる直近のstaticでない親コンテナブロックの内寸を参照します。


　⇒9.1 視覚整形モデル概論( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

例えば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-html4 … )」
　HTML5にするときは、それぞれ<article><section><header><footer><nav>になります。
　『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』
★目次もページの高さに合います。
★タブは＿に置換してあるので戻す。

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

相当ご丁寧にご説明いただいた事感謝いたします。
ありがとうございました。

通報する
お礼日時：2013/09/08 14:39

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報