Twitter Bootstrapで画面下部に固定するfooterを作成したのでメモ
環境
Twitter Bootstrapv2.0.4
IE7.0以上,opera,firefox,chorome等Twitter Bootstrapに対応しているブラウザ対応
Twitter Bootstrapは便利なツールなのですが、footerを画面下に配置するcssの設定が見当たらなかったので、実装しました。
footerの仕様
- HTML画面の下部にfooterを表示する。
- 画面の表示量が少ない場合は、画面最下部にfooterを表示する。
- 画面の表示量が多い場合は、スクロールして画面最下部に到着してからfooterを表示する。
このようなフッタをSticky Footer(スティッキフッタ)と呼びます
html
<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <meta charset="utf-8"> 
    <title> ProjectName</title> 
    <!-- Le styles --> 
    <link href="./develop/css/bootstrap.css" rel="stylesheet"> 
    <link href="./css/common.css" rel="stylesheet"> 
    <link href="./develop/css/bootstrap-responsive.css" rel="stylesheet"> 
  </head> 
<body> 
  <div class="wrapper"> 
    <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container-fluid"> 
          <a class="brand" href="#"> <span class="header_title"> ProjectName</span> </a> 
        </div> 
      </div> 
    </div> 
    
    <div class="container top_start_point"> 
      test!!
      <div id="push"><!--//--></div>
    </div> <!--/.container--> 
  </div> <!--/.wrapper--> 
  <footer> 
      footer content
  </footer> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
  <script src="./develop/js/bootstrap.js"> </script> 
</body> 
<</html> 
divで囲むwrapperクラスを用意します。これはbodyタグのfooterタグ以外を囲むタグです。
footerタグをdivで囲むwrapperクラスの外に設定します。
CSS
上記のhtmlで指定したcommon.cssの内容です。
html {
  height: 100%;
}
body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -2.3em;
}
footer {
  height: 2.3em;
}
.push {
  height: 2.3em;
}
.top_start_point {
  padding-top: 60px;
}
wrapperクラス内のmin-heightは領域の高さの最小値を設定します。
marginのautoはセンタリングを設定します(margin 上マージン auto 下マージン)
footerタグをdivのwrapperクラスの外に設定します。
top_start_pointクラスは画面の内容が開始する位置を指定しています。
ヘッダーを使用する場合に必要になるので注意してください。
私はTwitter Bootstrapを使うのは、まだ次期尚早かなと思うのですが、個人開発者はもう使ってのもよい段階に入っていると思います。
私も自分のWEBアプリをTwitter Bootstrapに差し替えるつもりです。(完了したら報告します)
個人実装で全てのブラウザに対応するのは苦しいので、Twitter Bootstrapのようなcssフレームワークは今後はやると思います。
でわ
参考サイト

 
 
