§01-11…body内部・ボックスの拡張範囲と＜min-height＞

(01) body内部・ボックス内のコンテンツが多ければ高さは自動拡張されます。ただし少なければウィンドウ下部が余白になってしまいます。コンテンツが少ない場合も、親ボックス(body)にある程度の高さを確保させることができます。その場合は<min-height>プロパティで最低限の高さを指定するのです。今回は「400px」を与えましょう。

body{
background-color:#FFFFFF;
background-image:url(sakura01.jpg);
background-repeat:no-repeat;
background-position:80% bottom;
min-height:400px;
}

(02) なお、今後コンテンツの量が増えればそれに応じてbodyの高さが自動拡張されます。
(例)
(03) 同じように、最小・最大と高さ・幅を組みあわて設定可能です。他のブロックレベル要素・ボックス(h,p,table,trなど)にも設定できます。