HOME > 開発者向けBLOG > Webデザイン >  背景をページの下部まで伸ばす

Technology Note 開発者向けBLOG

Webデザイン

背景をページの下部まで伸ばす

こんにちは、ゼノフィ渡部です。

背景色を下部まで要素がない場合でも、下まで伸ばす方法をご紹介します。

通常、ブロック要素のdivタグなどにbackgroundで背景色を指定した場合、要素がある分までしか背景色は伸びません。これをCSSで要素がない場所（下部）まで伸ばしてみます。

ルートである「html」と「body」要素に「height: 100%;」を指定、min-heightに対応していないブラウザ用に「height: 100%;」を「div.background」にも指定します。次に背景色を記述している「div.background」に最小の高さとして「min-height: 100%;」を指定します。「div.background」に「min-height: 100%;」を指定することよって、最小の高さとして、必ず背景色を高さに対してどこまでも伸ばすようにしています。

「body > div.background」の「height: auto;」 はブラウザを縮めて、縦にスクロールした際に、背景色が切れてしまうブラウザ用に指定しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

html,
body,
div.background {
  height: 100%; /* 「div.background」に対してはmin-heightに対応していないブラウザ用 */
}
 
div.background {
  min-height: 100%; /* 最小の高さ */
  width: 300px;
  background: #EFEFEF;
}
 
body > div.background {
  height: auto; /* 要素を超えた分の背景が伸びないブラウザ用 */
}

背景色が指定されているdiv要素にpタグをいくつか記述しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div class="background">
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
</div>

要素がある場所以降にも、背景色や背景画像をどこまでも伸ばしたい場合などに使用すると便利ではないのでしょうか。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

html,
body,
div,
p {
  margin: 0;  /* 余分なマージンを消去 */
  padding: 0; /* 余分なパディングを消去 */
}
 
html,
body,
div.background {
  height: 100%; /* min-heightに対応していないブラウザ用 */
}
 
div.background {
  min-height: 100%; /* 最小の高さ */
  width: 300px;
  background: #EFEFEF;
}
 
body > div.background {
  height: auto; /* 要素を超えた分の背景が伸びないブラウザ用 */
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<div class="background">
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
    <p>
        背景が下まで伸びています。
    </p>
</div>

<

>

PAGETOP