私はかなり長い間 Twitter ブートストラップ フレームワークを使用してきましたが、最近バージョン 3 に更新されました。
スティッキー フッターを下部に貼り付けるのに問題があります。Twitter のブートストラップ Web サイトで提供されているスターター テンプレートを使用しましたが、まだ運がありません。アイデアはありますか?
質問する
344031 次
26 に答える
52
これは、Bootstrap にすでにあるもの以外に追加の CSS や Javascript を必要とせず、現在のフッターに干渉しないスティッキー フッターを追加する方法です。
これをコピーしてコードに直接貼り付けるだけです。大騒ぎする必要はありません。
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
<a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
</p>
<a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
<span class="glyphicon glyphicon-star"></span> Subscribe on YouTube</a>
</div>
</div>
于 2015-02-21T16:59:31.337 に答える
31
これは、常に最適化されているため、今日のスティッキー フッターの簡略化されたコードです。これは良いことです。
HTML
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer with fixed navbar</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
<p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
</div>
<footer>
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
</body>
</html>
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;
}
于 2014-04-08T21:18:53.220 に答える
4
粘着性のある例は私にはうまくいきません。私の解決策：
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 3em;
}
于 2014-05-08T09:13:56.730 に答える
2
プッシュは、内ではなく、divの直後に行う必要がwrapあります..このように
<div id="wrap">
*content goes here*
</div>
<div id="push">
</div>
<div id="footer">
<div class="container credit">
</div>
<div class="container">
<p class="muted credit">© Your Page 2013</p>
</div>
</div>
于 2013-10-28T22:48:48.597 に答える
2
OPによる回答：
これを CSS ファイルに追加します。
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -60px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 60px;
}
#footer {
background-color: #eee;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
于 2016-05-11T10:52:10.970 に答える
1
Jek-fdrv の回答に基づいて.on('resize', function()、すべてのデバイスとすべての解像度で動作することを確認するために追加しました。
$(window).on('resize', function() {
if ($(document).height() <= $(window).height()) {
$('footer').addClass("navbar-fixed-bottom");
} else {
$('footer').removeClass("navbar-fixed-bottom");
}
});
于 2016-04-27T02:01:56.863 に答える
1
これらすべてを要約すると、フッターを除くすべての項目に必要な、またはそれ以下の項目を 1 つだけ心に留めておいてくださいmin-height: 100%。
于 2014-11-05T11:12:29.093 に答える
1
現在のバージョンのブートストラップは、この関数では機能しないようです。sticky-footer-navbar の例をダウンロードして、本体領域に大量のコンテンツを配置すると、フッターがビューポートの下部を超えて押し下げられます。全然べたつきません。
于 2016-12-01T22:26:16.313 に答える
0
#myfooter{
height: 3em;
background-color: #f5f5f5;
text-align: center;
padding-top: 1em;
}<footer>
<div class="footer">
<div class="container-fluid" id="myfooter">
<div class="row">
<div class="col-md-12">
<p class="copy">Copyright © Your words</p>
</div>
</div>
</div>
</div>
</footer>于 2015-01-27T16:41:20.267 に答える
0
フッターのクラスでブートストラップ ビルドを使用する場合。また、いくつかの JavaScript を記述する必要があります。
$(document).ready(function(){
$.fn.resize_footer();
$(window).resize(function() {
$.fn.resize_footer();
});
});
(function($) {
$.fn.resize_footer = function(){
$('body > .container-fluid').css('padding-bottom', $('body > footer').height());
};
});
固定フッターによりコンテンツの重複を防ぎpadding-bottom、ユーザーがウィンドウ/画面サイズを変更したときに調整します。
上記のスクリプトでは、フッターが次のように body タグ内に直接配置されていると仮定しました。
<body>
... content of your page ...
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="muted pull-right">
Something useful
</div>
... some other footer content ...
</div>
</div>
</body>
これは間違いなく最善の解決策ではありません (回避できる JS のため) が、オーバーラップの問題なく動作し、実装が簡単で応答性が高い ( heightCSS でハードコーディングされていない)。
于 2014-11-10T16:05:05.773 に答える
0
フッターナビゲーションバーにクラスを追加してみてください:
navbar-fixed-bottom
次に、custom.cssという名前の CSSと、このような本文パディングを作成します。
body { padding-bottom: 70px; }
于 2016-08-23T06:46:52.187 に答える
0
これは、ブートストラップで使用できる非常にシンプルでクリーンなスティッキー フッターです。完全対応！
HTML
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="">
</a>
</div>
</div>
</nav>
<footer></footer>
</body>
</html>
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
background-color: red;
}
例: CodePen デモ
于 2015-10-24T23:48:52.227 に答える