[解決済み] Bootstrap 3 フッターを最下部に移動させる。
2022-04-15 19:38:58
質問内容
私がデザインしているサイトにBootstrap 3を使用しています。
このサンプルのようなフッターをつけたいのですが。 サンプル
私は固定されていることを望んでいないので、bootstrap navbar-fixed-bottom は私の問題を解決してくれないことに注意してください。私はただ、常にコンテンツの一番下に表示され、レスポンシブであることを望んでいます。
何かご指導いただければ幸いです。
EDIT
分かりにくかったらごめんなさい。 今起こっていることは、コンテンツボディに十分なコンテンツがないときです。フッターが上に移動してしまい、下に空白が出来てしまうのです。
現在、ナビバーはこのようになっています。
<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>
CSS
.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
どのように解決するのですか?
以下の例をご覧ください。これにより、ページのコンテンツが少ない場合はフッターが下に付き、ページのコンテンツが多い場合は通常のフッターのように動作するようになります。
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
HTML
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
アップデイト Bootstrapの新バージョンでは、ラッパーを追加せずにスティッキーフッターを追加する方法を示しています。詳しくは、Jboy Flagaさんの回答をご覧ください。
関連
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] Twitter Bootstrapのメニューをクリックではなく、ホバーでドロップダウンさせる方法
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] HTMLのレイアウトにテーブルを使用しない理由は?[クローズド]
-
[解決済み] HTMLページのフッターを最小限の高さでページの下にとどめ、かつページには重ならないようにするCSS
-
[解決済み】フッターをページの一番下に流す、twitter bootstrap
-
[解決済み] Twitter Bootstrap: コンテナ内のdivを100%の高さにする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] HTMLアンカーは'name'と'id'のどちらで作成するのが良いですか?
-
[解決済み] HTMLページのフッターを最小限の高さでページの下にとどめ、かつページには重ならないようにするCSS