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フレームワークは今後はやると思います。
でわ
参考サイト
この記事がお役にたちましたらシェアをお願いします
0 件のコメント:
コメントを投稿