cssでｈｔｍｌ｛width:100%;｝の意味がわかりません

Question

いつもお世話になっております。
早速質問です。
あるサイトのCSSを拝見すると、以下の様な記述がありました。
html{
    width : 100% ;
    height : 100% ;
}

body{
    width : 100% ;
    height : 100% ;
}
BOXに幅や高さを指定する記述はよく見かけますが、htmlやbodyに幅や高さを100%と指定する理由がわかりません。
上記のCSSの意味を教えてください。
宜しくお願いします。

abril · Accepted Answer

私もNo.2-3様のご指摘の通りだと思いますが。参考にされているソースの信頼度によってはhtmlやbodyに対するそれらの指定を「何となく」やってるだけの可能性もないとは言えないのでは…具体的なソースを見ていないので、明言は避けますが。自分が制作する上ではそういう指定をする必要性に迫られた事はないですね、今のところ。そもそも、"width: 100%;"というのは「直近の親要素の幅に対する100%」です。html要素は「ルート要素（最大の親要素）」であり、それより上位の親要素は存在しないので、ディフォルトの幅はウィンドウサイズ全体と考えて良いのですから、そこに100%を指定してもただ無意味なだけだと思いますが。ちょっと気になる発言があったので以下はそれについての蛇足ですが… htmlやbody要素に何も幅が指定されていなくても、bodyの直接の子要素に位置するコンテナブロックであればディフォルトもしくはその要素へ直接"width: 100%;"を指定してもその横幅は画面サイズ一杯に広がりますよ。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- サンプル

幅無指定のボックス

幅100%で指定のボックス

---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- body { margin: 0; padding: 0; background: #fff; } div#hoge1 { background: #fcc; } div#hoge2 { width: 100%; background: #ccf; } ---------------------------------------------------------------------- 上記では、hoge1（widthの値はディフォルト）もhoge2（widthの値は100%）でも結果は同じでいずれも「ウィンドウサイズ一杯」の幅でレンダリングされます。

reverie013 · Answer

すみません、書き漏れていました。；

正確には、％で指定するために必要な物、だと思います。
例えばボックスの縦幅を、画面いっぱいに広げたい時に
ただ100%と指定しても反映されないのですが、
html,bodyに数値を設定しておけば反映されるようになるのです。

『body hright:100%;』で検索すると色々情報が出てきますので
ぜひそちらをご参考下さい。

noname#83877 · Answer

訂正します

垂直水平中央配置のために必要だと思い指定されたものだと思いますが

noname#83877 · Answer

特に意味は無いと思います。
height:100%;とあるので垂直水平中央配置のために必要だと思いますが、無くても問題ありません。

reverie013 · Answer

heightの方は、body以下のブロックレベル要素に高さを指定するための設定ですね。
(多分)普通は併せてmargin:0;padding:0;なども指定すると思います。
widthの方は私はちょっとわからないですね。。。

cssでｈｔｍｌ｛width:100%;｝の意味がわかりません

私もNo.2-3様のご指摘の通りだと思いますが。

すみません、書き漏れていました。

訂正します

特に意味は無いと思います。

heightの方は、body以下のブロックレベル要素に高さを指定するための設定ですね。

関連するカテゴリからQ&Aを探す

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

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