コーディングメソドロジー
第21回 フッターのページ下部固定

第21回 フッターのページ下部固定

Webサイトのページは、デザイン時点では一枚の「絵」ですが、サイトが公開されユーザが閲覧するのは、いろいろな解像度やディスプレイサイズのブラウザに表示された「画面」になります。そのため、どんなブラウザ・どんなディスプレイで閲覧されても、そのデザイン意図が反映されるようにするために、コーディング面で独特の注意を払う必要があるケースがあります。
今回はその中から、ページの内容量に関わらず、ページの最下部にフッターを固定する方法をご紹介します。

フッターを固定する理由

フッターがページの最大幅まで広がって、他の部分の背景と異なる色が敷かれているようなデザインの場合、意識せずにコーディングしてしまうと、ページコンテンツ部分のボリュームが少ないときに、本来は画面の一番下にいるはずのフッターが、コンテンツの長さに連動して上がり、ページ下部に不自然な空白（背景）が見えてしまいます。
このようなデザインの場合は、コンテンツの内容量に左右されないでフッターが常に画面の一番下にとどまるように、フッターを固定したコーディングをする必要があります。

手順1：フッターを除くコンテンツの高さを100%にし、フッターを画面からはみ出させる

画面（黒部分）はコンテンツ領域とし、フッターは画面の外にはみ出させます

フッターを下部に固定するために、まずはフッター以外のコンテンツ部分で画面全体の高さを100％にとって、画面をコンテンツ部分で埋め、フッターを『常に画面からはみ出る』状態にします。
たとえばフッターの高さが100pxの場合、右記のような記述になります。
このソースでは、「min-height：100％;」や「height:100%;」などで、コンテンツが少ない場合でも画面の100％よりも高さが低くならないようにしています。この記述で、コンテンツの量が多い場合はコンテンツ量に応じて伸びていき、逆にコンテンツが少ない場合は、ページ全体の高さは画面の100％を下回らない高さである『100%+100px』となります。これでフッターが常に画面からはみ出ている状態を作ることができます。

手順2：ページからはみだしたフッターを持ち上げる

いったんはみ出させたフッターを持ち上げます

上の手順で常にフッターの100pxがページからはみ出る状態になったところで、今度は「margin-top:-100px;」を指定して、フッターをフッター自体の高さ（100px）分強制的に上に持ち上げます。
これで、常にフッターをページ下部に配置することができます。
そして、これだけだとコンテンツ部分とフッターが重なってしまうため、コンテンツ側のmarginやpaddingを指定し、フッター間との余白を調節していきます。