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 件のコメント:
コメントを投稿