ホームページを制作する時にFooterの扱いで困る事が多いので、備忘録 and テンプレートを残しておきます。
一言でfooter（フッタ）と言っても、webページ毎にデザインも違うし仕様も扱いも内容も全く違います。
コピーライトを文字列で表示しているだけのページもあれば、ヘッダと同じメニューをフッタにも表示させていたり、ヘッダはサイトメニューを表示して、運営会社メニュー（会社概要やプライバシーポリシーなど）をフッタに盛り込んでいるサイトもあります。
どの使い方をしても正解・不正解という判断はないのですが、フッタを画面（ページ）の下付きにするという状態は汎用的にやろうとすると、難しいという事は言えます。
ちなみに、今回はjavascriptは一切使わずHTML構造とCSSのみを使っての構造体を基本とします。
※その方が無駄にリソースやらブラウザパワーを使わないのでエコシステムですね。
基本構造
ページの構成も今現在では、色々なテンプレートが数多くありますが、今回は、比較的シンプルな１カラム３段構成について考えてみたいと思います。 下記のソースコードを基本として使います。<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<title>header-footer-template</title>
<link rel="stylesheet" href="frame.css" />
</head>
<body>
<div class="header">Header</div>
<div class="contents">Contents</div>
<div class="footer">Footer</div>
</body>
</html>
html,body{
width:100%;
height:100%;
}
.header{
width:100%;
height:50px;
background-color:#FAA;
}
.footer{
width:100%;
height:100px;
background-color:#AAF;
}
.contents{
width:100%;
min-height:300px;
background-color:#FFA;
}
フッタ下付きの条件
ヘッダ部 コンテンツ部 フッタ部 この３段構成は、ホームページの基本で一番スタンダードな形ですが、この場合にヘッダをfixedとさせる仕様もありますが、今回はこの３要素はstaticとしてscrollさせる仕様で考えます。 通常のホームページであれば、ヘッダとフッタ部分は、サイズ固定として考えられますが、コンテンツ部はサイズ可変が一般的です。 コンテンツ部分は、すご〜く長くなるケースもあれば、テキスト数行の超短いケースも考えられます。 また、構築中などにおいて、空白ページという可能性もあり,、この際に問題になるのが、フッタの定位置です。 上記のサンプル画像を見て分かる通り、ページ構成を全てstaticで作った場合に、フッタはコンテンツ部分の下付きになりますが、サイズが小さい場合にフッタは画面下部ではなく、中央部や上部に表示されてしまいます。 コンテンツサイズが大きい場合は問題ではないのですが、こうした場合にどのようにすればいいのでしょう？コンテンツ部の最小サイズを決める
CSSで簡単に行う場合は、コンテンツ部分の最小値をcalc機能を使ってセットします。html,body{
width:100%;
height:100%;
}
.header{
width:100%;
height:50px;
background-color:#FAA;
}
.footer{
width:100%;
height:100px;
background-color:#AAF;
}
.contents{
width:100%;
min-height:calc(100% - 50px - 100px);
background-color:#FFA;
}
.contentsの「min-height:calc(100% - 50px - 100px);」のみを書き換えましたが、画面の下付きになっていることが確認できます。
ポイントは、100%からヘッダとフッタのheightサイズを差し引いてあげれば、いいだけなんですね。
contents要素が縦に長くなった場合は、自然とフッタはコンテンツ下付きになるので、この点も問題なし。
要点解説
cssの冒頭に記述している、heightの100%はおまじないだと思って記述してください。 ※この指定が無いと、それ以下のDOM構造でheightの値が正常に取得できなくなります。html,body{
width:100%;
height:100%;
}
次にサンプル画像を見て気がつくのは、何故かスクロールバーが表示されているという点です。
これを回避するには、bodyなど、基本要素のmargin,paddingを徹底的に無くすという事で、以下のように書いてみました。
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
}
無事にスクロールバーも無くなり問題解決です。
codepenに最終盤を上げておくので、参考にしてみてください。
See the Pen footer-position by YugetaKoji (@geta1972) on CodePen.
