1. ホーム
  2. html

[解決済み] 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さんの回答をご覧ください。