2011年5月1日

DIVの高さをページの一番下まで伸ばす

DIVに指定した背景画像をコンテンツの内容に関係なくページ一番下まで伸ばす方法をご紹介。

DIVに何も指定していない状態だとコンテンツの内容によってボックスは下に伸びていきますが、親要素であるhtmlとbodyの高さを100%としたうえで、高さを100%にしたい要素にmin-height: 100%;と指定する事で、最低限の高さが100%になるため、ページの一番下までボックスを伸ばす事が出来ます。

HTMLの例

<html>
<body>
ボックスの高さを100%に
</body> </html>

CSSの例

html{
height:100%;
}
body{
margin: 0;
padding: 0;
height:100%; 
}
body > .box {
height: auto;
}
.box{
height:100%;
min-height:100%;
}

サイトを囲む背景画像を一番下まで伸ばしたいのに、コンテンツが少ないページだとコンテンツの部分で途切れてしまう、というケースに使用出来ます。DIVの高さをページの一番下まで伸ばすCSSのご紹介でした。

,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です