2012年9月15日土曜日

Twitter BootstrapでSticky Footerを作成するその2

Twitter Bootstrapで画面下部に固定するfooterを作成したのでメモ

環境

Twitter Bootstrapv2.1

IE7.0以上,opera,firefox,chorome等Twitter Bootstrapに対応しているブラウザ対応

以前、Twitter Bootstrapを使ってfooterを画面下に配置する方法を記述したのですが、ちょっとミスがあったので追加します。

footerの仕様

  • HTML画面の下部にfooterを表示する。
  • 画面の表示量が少ない場合は、画面最下部にfooterを表示する。
  • 画面の表示量が多い場合は、スクロールして画面最下部に到着してからfooterを表示する。

仕様は以前と同じです。
しかしこの実装だと、メイン画面の表示量がスクロール位置の限界まである場合、フッターがメイン画面に覆いかぶってしまうという問題が発生します。
なので、以前のコードを以下のように変更します。

html version1.1


<!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 content_end_point"> content_end_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> 

content_end_pointはコンテンツの終了する位置を指定するクラスです。

CSS version1.1

上記の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;
}

.content_end_point {
  padding-bottom: 30px;
}

フッターの表示サイズだけpadding-bottomを指定しています。これで、フッターがメイン画面に覆いかぶさらなくなります。

以上

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...