3/3 本文が短い場合でも、フッタを画面下部に表示する方法 [ホームページ作成] All About

中身の高さが足りない場合にフッタを画面下部に固定する方法の解説

さて、前ページでご紹介したCSSソースの内容について、順に解説しておきます。

記述する際の注意点としては、「(HTML内で最上位の要素である)html要素」から、「フッタ部分を作る要素(ここではdiv要素)」の親要素に至るまでの階層に存在する、すべての要素に対して「高さ」を指定することです。途中に「高さ」の指定がない要素が1つでもあると、うまく表示されなくなります。

1. 全体の装飾

/* ★全体の装飾(必須) */
html,body{
   height: 100%;
   margin: 0px;
   padding: 0px;
}

まず、html要素とbody要素の両方に対して、「height:100%」を指定します。これによって、html要素・body要素の高さが、ブラウザの描画領域の高さに合います。

※ここでborder(枠線)やpadding(内側の余白)に値1px以上を指定すると、スクロールバーが出てしまうので注意して下さい。どうしてもそう装飾したい場合は「box-sizing: border-box;」の指定を加えれば解決します。ただし、このbox-sizingプロパティはIE7以下では使えません。また、Firefox28以下・Chrome9以下・Safari5以下にはベンダープレフィックスが必要です。とはいえ、現在のブラウザシェアを考えれば、特に気にせず使っても問題ないでしょう。

2. ヘッダ部分の装飾(任意)

/* ▽ヘッダ部分の装飾(必須ではありません) */
#header {
   background-color: #757575; /* 背景色 */
   color: white;              /* 文字色 */
}

ここでは、ヘッダ部分の配色を指定しているだけです。好きなように指定して下さい。ヘッダ部分の存在は、今回の方法に必須ではありません。したがって、このヘッダ部分自体の記述は省略しても問題ありません。

3. ページ全体を覆うブロック

/* ★ページ全体を覆うブロック(必須) */
#pagecover {
   position: relative;
   min-height: 100%;
}

この「ページ全体を覆うブロック」は必須です。body要素の直下にこのブロックを作成し、ページ内に存在するすべての要素はこのブロックに含めるようにします。

このブロックは、フッタの掲載位置を決定する基準にするため、positionプロパティに値「relative」を指定しておきます。さらに、最低の高さ(min-height)を「100％」にしておきます。これによって、このブロックの高さは「最低でもbody要素の100％(＝つまり描画領域の高さの100％)」になります。

※height(高さ)ではなく、min-height(最低の高さ)なので、ページの内容が1画面分よりも多い場合には、その分だけ長く伸びます。

4. フッタ部分の装飾

/* ★フッタ部分の装飾(必須) */
#footer {
   position: absolute;
   bottom: 0px;
   width: 100%;
   height: 4em;               /* フッタの高さ */
   color: white;              /* フッタの文字色 */
   background-color: #757575; /* フッタの背景色 */
}

フッタ部分は、positionプロパティに値「absolute」を指定して絶対配置にし、bottomプロパティに値「0」を指定することで、基準となる要素の最下部に配置します。ここでの「基準となる要素」とは、positionプロパティに値「relative」を指定した「3. ページ全体を覆うブロック」です。

その「3. ページ全体を覆うブロック」の高さ(長さ)は、「最低でも1画面分の高さ」になり、内容が多ければその分だけ長く伸びるよう装飾しました。その結果、フッタ部分は、

ページ内に含まれるコンテンツ量が足りない場合：
→ 画面下部に固定される
ページ内のコンテンツ量が充分多い場合：
→ (画面下部には固定されずに)コンテンツの末尾に表示される

……となるわけです。

なお、絶対配置にする都合上、widthプロパティに値「100%」を指定して横幅一杯に広げる指定が必要です。これがないと、フッタの内容が少ない場合に、フッタの横に空白ができてしまいます。また、heightプロパティを使って、「フッタの高さ」を決める必要があります。

5. 本文部分を覆うブロック

/* ★ヘッダやフッタを除いた本文部分を覆うブロック(必須) */
#contents {
   padding-bottom: 4em; /* フッタの高さ分だけ余白を追加 */
}

本文領域を囲むブロックの下部には、フッタを表示する分だけ余白を追加しておく必要があります。これがないと、フッタが本文の末尾に重なってしまいます。「4. フッタ部分の装飾」のソースで指定したheightプロパティの値に合わせて、padding-bottomプロパティ(下側の余白)の値を記述して下さい。

(補足) 6. 調整

/* ▼h1要素やp要素など、デフォルトで余白のある要素を使う場合には必須の調整装飾 */
#header h1,#header p,#footer p {
   margin: 0px;
   padding: 0px 10px;
}

なお、ヘッダ部分やフッタ部分に「デフォルトで余白(margin)のある要素」を掲載する場合、上記のようにmarginプロパティに値「0」を指定しておかないと、ヘッダやフッタの外側に余白が設けられてしまうため、(ヘッダやフッタが)意図通りに配置されなくなります。

※上記の補足ソースは、あくまでも例(前ページのHTMLに合わせた例)であり、どのような記述が必要かは、HTMLの記述内容によって異なります。paddingの値は好みに応じて修正して下さい。