HTML,CSS勉強メモ #6 〜高さ画面いっぱいの詳細〜

本日の勉強。

勉強内容

実践！ウェブサイトを作ろう

　　05～09

進度

• 05:３カラムのレイアウト（可変幅）
• 06:３カラムのレイアウト（固定幅）
• 07:文書の構造を作っていこう
• 08:２カラムのレイアウトを作ろう
• 09:背景を設定しよう

まで終了。

メモ

背景を設定しよう:containerの高さを画面一杯にする方法詳細

レッスン内ではおまじない的に書かれていましたので調べてみました。

html {
    height: 100%
}
body {
    height: 100%
}
body > #container {
    height: auto;
}
#container {
    min-height: 100%;
    height: 100%;
}

• htmlとbodyのheight:100%;はそのままの意味ですが、子要素でheight:100%;を指定した場合、親要素の高さを元に算出されるためここを指定しないとキチンと表示されません。
• body > #containerのheight: autoは、containerの中身が多くなりすぎたとき用の対応のようです。
• #containerのmin-height: 100%は高さの最小値を指定するもので、上のautoの影響で中身が少ない時に縮まってしまうのを防止する用です。
• その下のheight:100%はそのままの意味だと思うのですが、これをつけなくても高さはいっぱいになりました。なのでなぜあえて付けるのか調べ中です。