divの高さをページの一番下まで伸ばす〜CSS
【概要】
divに指定した背景画像をコンテンツの内容に関係なくページ一番下まで伸ばす方法。
「HTML」
<html>
<body>
<div class="box">ボックスの高さを100%に</div>
</body>
</html>
<html>
<body>
<div class="box">ボックスの高さを100%に</div>
</body>
</html>
「CSS」
html{
height:100%;
}
body{
margin: 0;
padding: 0;
height:100%;
}
body > .box {
height: auto;
}
.box{
height:100%;
min-height:100%;
}
html{
height:100%;
}
body{
margin: 0;
padding: 0;
height:100%;
}
body > .box {
height: auto;
}
.box{
height:100%;
min-height:100%;
}
divに何も指定していない状態だとコンテンツの内容によってボックスは下に伸びていきますが、高さをmin-height: 100%;と指定する事で最低限の高さが100%になるため、ページの一番下までボックスを伸ばす事が出来ます。
これに加えて「html」「body」にもheight: 100%;を指定する事により、<div class="box">をページ一番下まで伸ばす事が出来ます。
サイトを囲む背景画像を一番下まで伸ばしたいのに、コンテンツが少ないページだとコンテンツの部分で途切れてしまう、というケースに使用出来ます。
