【CSS】Footer（フッター）の固定方法

CSSで要素を編集する度に、上へ行ったり下に行ったり、あちこち移動するフッター…。
あんたはじっとしてなさい！ということでCSSでフッターを固定する方法を紹介します。

フッターを固定するコードは以下のようになります。

footer{  
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

一行ずつ何をしているのか説明しますね。

一行目

 position: fixed;

これは、要素を画面の決まった位置に固定したい時に使用します。
この画面では、LGTMやストックボタン、SNSのシェアボタンが画面をスクロールしても、いつでもスクリーンの同じ位置に表示されていますよね。
フッターの場合は、いつでも画面の一番下に表示されていて欲しいので、fixedを使用し「この要素（フッター）は、画面のある位置に固定したいです」と宣言します。

二行目と三行目（同じ仕組みなのでまとめて説明します）

先ほどは、「フッターを固定したい！」と宣言したので、次にどの位置に固定したいのかを書いていきます。

 left: 0;
 bottom: 0;

これは、フッターを左また下からどのくらい離れた所に配置したいかを指定しています。
フッターは一番下にピローンと横たわっていて欲しいので、以下の図のように、左からゼロ距離かつ下からゼロ距離に配置します。

四行目

 width: 100%;

これは、フッターの幅を表してします。
フッターには画面に左端から右端までみょーんと伸びていて欲しいので、100%にします。
「100%」と画面に対する比率で設定することで、スクリーンの大きさやブラウザの幅に左右されず、どの大きさの画面でも、一番下の端から端まで表示されます。

ご参考まで。

参考元
How TO - Fixed Footer
CSSのpositionを総まとめ！absoluteやfixedの使い方は？