HOME > 開発者向けBLOG > Webデザイン >  ヘッダーとフッターを固定

Technology Note 開発者向けBLOG

Webデザイン

ヘッダーとフッターを固定

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

CSSだけでヘッダーとフッターの位置を固定する方法をご紹介いたします。

ヘッダーとフッターは3行目の「position: fixed;」でスクロールしても位置が固定するようにし、4行目の「top: 0;」、18行目の「bottom: 0;」でそれぞれ上下に表示しています。中央表示は「width: 100%;」プロパティで実現させています。

コンテンツは「overflow: auto;」でヘッダーとフッター以外のスクロール制御をするようにし、「padding: 150px 0 150px;」でスペースを取って、通常時にヘッダーとフッターの後に潜り込まないようにしています。

問題はIE6です。IE6は「position: fixed;」に対応していないで、IE6用のプロパティを用意します。25行目の「_height: 100%;」で一度、画面全体の高さをいっぱいにしてフッターまでを表示させています。「position: fixed;」の代わりに31行目に「_position: absolute;」を使用し、ヘッダーとフッターをスクロールしても位置が固定するようにしています。36行目の「_margin-right: 17px;」はIE6のスクロールバーと同じ幅を指定しています。これを指定しない場合、IE6のスクロールバーがヘッダーとフッターの後に潜り込んでしまいます。「.contents_wrap」の40~42行目のプロパティはコンテンツがブラウザの高さを超えた場合、スクロールを出すようにしています。

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
39
40
41
42
43
/* ヘッダー */
.header_area {
  position: fixed; /* 固定 */
  top: 0; /* 一番上に表示 */
  width: 100%; /* 中央に表示 */
}
 
/* コンテンツ */
.contents_area {
  width: 700px;
  overflow: auto; /* スクロールする範囲を制御 */
  margin: 0 auto;
  padding: 150px 0 150px; /* コンテンツ上下にスペース */
}
 
.footer_area {
  position: fixed; /* 固定 */
  bottom: 0; /* 一番下に表示 */
  width: 100%; /* 中央に表示 */
}
 
/* IE6 */
html,
body {
  _height: 100%;
  _overflow: hidden;
}
 
.header_area,
.footer_area {
  _position: absolute;
}
 
.header_block,
.footer_block {
  _margin-right: 17px; /* IE6のスクロールバーの幅分のスペース */
}
 
.contents_wrap {
  _width: 100%;
  _height: 100%;
  _overflow: auto;
}

ヘッダー、コンテンツ、フッターと3つに分けています。「<div class="contents_wrap">」はIE6用に使用しています。

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
<!-- ヘッダー -->
<div class="header_area">
    <div class="header_block">
        <div class="header_box">
            <h1>
                CSSだけでヘッダーとフッターの位置を固定
            </h1>
        </div>
    </div>
</div>
<!-- /ヘッダー -->
 
<!-- コンテンツ -->
<div class="contents_wrap">
    <div class="contents_area">
        <div class="content_block">
              ヘッダーとフッターが固定になっています。
        </div>
    </div>
</div>
<!-- /コンテンツ -->
 
<!-- フッター -->
<div class="footer_area">
    <div class="footer_block">
        <div class="footer_box">
            <p>
                フッター
            </p>
        </div>
    </div>
</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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
body {
  margin: 0;
  padding: 0;
  background: #FBF7EC;
}
 
/* ヘッダー */
.header_area {
  position: fixed; /* 固定 */
  top: 0; /* 一番上に表示 */
  width: 100%; /* 中央に表示 */
}
 
.header_block {
  background: #FDDC80;
}
 
.header_box {
  width: 700px;
  margin: 0 auto;
}
 
.header_box h1 {
  margin: 0;
  padding: 20px 0;
  font-size: 34px;
  text-align: center;
}
 
/* コンテンツ */
.contents_area {
  width: 700px;
  overflow: auto; /* スクロールする範囲を制御 */
  margin: 0 auto;
  padding: 150px 0 150px; /* コンテンツ上下にスペース */
}
 
.content_block {
  padding: 300px 10px;
  border: 1px solid #CCC;
}
 
/* フッター */
.footer_area {
  position: fixed; /* 固定 */
  bottom: 0; /* 一番下に表示 */
  width: 100%; /* 中央に表示 */
}
 
.footer_block {
  background: #FDDC80;
}
 
.footer_box {
  width: 700px;
  margin: 0 auto;
}
 
.footer_box p {
  margin: 0;
  padding: 20px 0;
  font-size: 34px;
  text-align: center;
}
 
/* IE6 */
html,
body {
  _height: 100%;
  _overflow: hidden;
}
 
.header_area,
.footer_area {
  _position: absolute;
}
 
.header_block,
.footer_block {
  _margin-right: 17px; /* IE6のスクロールバーの幅分のスペース */
}
 
.contents_wrap {
  _width: 100%;
  _height: 100%;
  _overflow: 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
<!-- ヘッダー -->
<div class="header_area">
    <div class="header_block">
        <div class="header_box">
            <h1>
                CSSだけでヘッダーとフッターの位置を固定
            </h1>
        </div>
    </div>
</div>
<!-- /ヘッダー -->
 
<!-- コンテンツ -->
<div class="contents_wrap">
    <div class="contents_area">
        <div class="content_block">
            ヘッダーとフッターが固定になっています。
        </div>
    </div>
</div>
<!-- /コンテンツ -->
 
<!-- フッター -->
<div class="footer_area">
    <div class="footer_block">
        <div class="footer_box">
            <p>
                フッター
            </p>
        </div>
    </div>
</div>
<!-- /フッター -->

PAGETOP