1. トップページ >
  2. CSS >
  3. DIVの高さをページの一番下まで伸ばすためのCSSの指定
2011年5月1日

DIVの高さをページの一番下まで伸ばすためのCSSの指定

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

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

HTMLの例

<html>
<body>

ボックスの高さを100%に

</body>
</html>

CSSの例

html{
height:100%;
}

body{
height:100%; 
}

.box{
height:100%;
background: #ccc;　/* 確認のために背景色を指定 */
}

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

,

関連コンテンツ

「CSS」の最新記事

コメントを残す

メールアドレスが公開されることはありません。