読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

結局、footerの下部固定はどうやるべきなのか。レスポンシブ対応で今のところベストな方法

RWD WebDev HTML&CSS

問題

 フッターの下部固定が問題になることは、コンテンツに不足がないCGMサイトやメディアでは特に問題にならないので、なかなか問題として扱われにくいという気がしている。しかし、個人メディアや小規模サイトにおいては、ヘッダー領域のコンテンツと合わせても、縦の合計が400pxに届かないようなある意味貧しいページに頻繁に出会うことになる。その際に、フッターに対して何もスタイル上の対策をしておかないと、コンテンツ領域にフッターが浮いてくっつくようになってしまい、不恰好に見える。

今のところベストな方法

 この件に関しては何度も調べていたものの、これまでBootstrapで検索することが多かったからか、今回はBootstrapのページが検索上位に出てきた。そこで見つけたのが、この( Sticky Footer Template for Bootstrap )ページだった(このやり方で解決した)。
 Bootstrapによるページだけれど、Bootstrapとは全く関係ない独立したCSSスニペットとして使えるので、このCSSフレームワークを使用していなくとも問題無い。

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {  /*<footer class="footer">*/
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

 非常にシンプルで、HTMLを載せる必要がないくらい。レスポンシブデザインを全く考慮しなければ、ここでさようなら。

レスポンシブデザインのための考慮

 レスポンシブ・ウェブ・デザインをしている人ならばすぐに感づいたはずですが、60pxの絶対値指定が気になるところ。両方とも除外してしまうと、.footerにabsoluteを適用しているので、footer内のコンテンツがモバイル時に画面を覆い尽くしてしまうトラブルが生じてしまう。
 これを回避するためには、ブレイクポイントに応じて、bodyに適用したmargin-bottomと、.footerのheightを*1メディアクエリを使用して段階的にセットしなおす、というRWDの基本的な対処が必要になります。ここは実際に自分のサイトのウィンドウ幅を動かしながら、footer領域のコンテンツが各ブレイクポイントでどのくらいの長さになるのかを見ていくしかなさそうです。

今のところ、といったのは……

 今のところ、と言わざるを得ないのは、RWD考慮のところを、fluidにできていないため。WordPressウィジェットをfooterに表示させるときのような、縦の長さが予測できないときには、これだと不具合がおきてしまう。
 

*1:ここの値は同じにする