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

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を利用する方法が一番シンプルだと思った。

参考ページ（素晴らしい技に感謝！）
- A CSS Sticky Footer
- 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>