footer コンテンツがあまりないときでもフッターを下にくっつけるcssとjavascript

ヘッダーやコンテンツ、フッターがあるサイトでコンテンツの中身が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね。
お問い合わせの送信完了ページとか。

そんな数行しか無いコンテンツページでも、フッターを下にくっつけて表示させる方法。by cssとjavascriptで。

基本HTML

CSS

見た目はこんな感じに

footerフッターを下付きに 2015-06-17 10-28-23_s

cssでフッターを下付きにする

ポイントは、

  • html,bodyをheight:100%
  • ラップする#containerに高さheight:100%,min-height:100%のほか、ブラウザを縮めた時にコンテンツの高さまできたら自動的に止まるようにheight:auto!important;を指定
  • #footerでposition:absolute;を使うため、position:relativeを設定
  • #footerはposition:absolute; でbottom:0;に
  • position:absoluteを指定するとwidthがクリアされてしまうのでwidth:100%;を指定
  • #contentにフッターの高さ分の余白を指定

完成

footerフッターを下付きに 2015-06-17 10-39-38_s

demo

javascript でフッターを下部に固定する

CSSがめんどくさいな~という場合は、javascriptもありました。
こちらもとっても便利です。

footerをウィンドウ下部に固定する『footerFixed.js』
http://blog.webcreativepark.net/2007/11/16-012253.html

javascriptを読み込んで、固定したい要素に#footerをつけるだけ。

 

状況によって使い分けたいと思います!

SNSでもご購読できます。