私が設計しているサイトでは Bootstrap 3 を使用しています。
このサンプルのようなフッターが欲しいです。サンプル
固定は望んでいないので、bootstrap navbar-fixed-bottom では問題は解決されないことに注意してください。常にコンテンツの下部に表示され、レスポンシブであることだけを望んでいます。
どのようなガイドでも大歓迎です。
編集：
分かりにくくて申し訳ありません。コンテンツ本体に十分なコンテンツがない場合、フッターが上に移動し、下部に空白が残ります。
これが私のナビゲーションバーの現在のものです
<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h5 id='footer-header'> SITEMAP </h3>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>News</p>
<p>contact</p>
</div>
<div class="col-sm-4" style="padding: 0 0 0 0px">
<p>FAQ</p>
<p>Privacy Policy</p>
</div>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxx </h3>
<p>yyyyyyyyyyyyy</p>
</div>
<div class="col-sm-4">
<h5 id='footer-header'> xxxxx </h3>
<p>uuuuuuuuuuuuuuu</p>
</div>
</div>
</div>
</nav>
CS
.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
ベストアンサー1
ここでは、bootstrap からの簡略化されたソリューションがあります (新しいクラスを作成する必要はありません)。http://getbootstrap.com/examples/sticky-footer-navbar/
そのページを開いたら、ブラウザを右クリックして「ソースの表示」を選択し、sticky-footer-navbar.cssファイルを開きます（http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css）
このCSSだけが必要なことがわかります
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
このHTML
<html>
...
<body>
<!-- Begin page content -->
<div class="container">
</div>
...
<footer class="footer">
</footer>
</body>
</html>