行数が少ない時でも、フッタ位置を常にページの一番下に表示してくれるCSS

Ruby on Rails

PicLensのWebmaster's Guideによると、PicLens対応の手順が、以下のように書かれている。

How It Works
Learn By Example: A Basic PicLens Gallery
Step-by-Step Instructions

    1. Create a Media RSS Feed
    2. Enable RSS Autodiscovery
    3. Match Your HTML Page's Images to the Media RSS Tags
    4. Add a PicLens Badge to Your Site (optional)
...（中略）...
http://piclens.com/lite/webmasterguide.php

気になるのが4番目。「自分のサイトにPicLensバッジを付ける（オプション）」というのがある。
← PicLensバッジ
こういうのを大事にしたい！やってみた。

  • PicLensバッジをデスクトップにドラッグ＆ドロップしてダウンロード。
  • ダウンロードしたpiclens_badge.gifをRailsプロジェクトの「public/images/」フォルダに移動。
  • レイアウトファイルの修正。
<%# レイアウト: app/views/layouts/galleries.html.erb %>
...（中略）...
<body>

  <p style="color: green"><%= flash[:notice] %></p>

  <%= yield  %>

  <div class="footer">
    <hr size="1" style="color:#ccc">
    <%= link_to image_tag("piclens_badge.gif"), "http://piclens.com", :popup=>true %>
  </div>

</body>
</html>
  • 以上で完了。簡単な作業だ。ページを確認。思った通り出来たけど...でも何だか格好悪い。

  • 問題は、フッタのつもりで書いた水平ラインとPicLensバッジが、リストの行数が少なくてページの真ん中に表示されているからと感じた。
  • このような状況でも、フッタは常にページの一番下に表示しておきたいものだ。

CSSで実現する方法

調べてみるといろいろ方法はあったが、以下のCSSを利用する方法が一番シンプルだと思った。

<html>
<body>

  <div class="wrapper">
    本文
    <div class="push"></div>
  </div>

  <div class="footer">
    フッター
  </div>

</body>
</html>
  • 上記のような構造のHTMLに対して、以下のCSSを指定することで、フッタが常にページの一番下に表示される。
/* スタイルシート: public/stylesheets/sticky_footer.css */

* {
    margin: 0;
    }
html, body {
    height: 100%;
    }
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px; /* the bottom margin is the negative value of the footer's height */
    }
.footer, .push {
    height: 80px; /* .push must be the same height as .footer */
    }

利用してみる

  • スタイルシートをpublic/stylesheets/sticky_footer.cssとして保存。
    • フッタを一番下にするために完璧を求めるなら「* {margin: 0;}」が必要だが、その他の部分でレイアウトの修正が必要になるので、iPhotoLensではコメントアウトしておいた。
  • レイアウトファイルを以下のように修正した。
<%# レイアウト: app/views/layouts/galleries.html.erb %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Galleries: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
  
  <%= stylesheet_link_tag 'sticky_footer' %>
  <%= auto_discovery_link_tag :rss, formatted_photos_path(:rss, :path=>params[:path]) %>
  <%= javascript_include_tag "http://lite.piclens.com/current/piclens.js" %>
</head>
<body>

  <div class="wrapper">
    <p style="color: green"><%= flash[:notice] %></p>
    <%= yield  %>
	<div class="push"></div>
  </div>

  <div class="footer">
    <hr size="1" style="color:#ccc">
    <%= link_to image_tag("piclens_badge.gif"), "http://piclens.com", :popup=>true %>
  </div>

</body>
</html>

ページの確認


フッタの位置は常に一番下。なかなかいい感じだ！
PicLensバッジを表示しようとして素晴らしい技を一つ覚えることができた。得した気分！