☰

Bootstrap スティッキーフッターの重複コンテンツ 質問する

tag-icon • tag-icon html css twitter-bootstrap
Bootstrap スティッキーフッターの重複コンテンツ 質問する

私は Bootstrap を初めて使用し、Symfony2 で使用しようとしています。ナビゲーションに使用するメインのトップバー スティッキーはすでにあります。問題は、下部にスティッキーな同様のフッターを追加しようとすると、コンテンツと重なってしまうことです。上部のナビゲーション バーの問題を回避するために、次のように JQuery スクリプトを使用しています。

$(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height());
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height());
        });
    });

私のメインの Twig レイアウトの構造は次のようになります。

    <div class="navbar navbar-default navbar-fixed-top" id="topnavbar">
      <div class="container-fluid">
      </div>
    </div>
    {% block body %}
    {% endblock %}
    <footer class="footer navbar-fixed-bottom">
    </footer>

margin bottom私の CSS はオリジナルです。またはを試してみましたpadding bottomが、コンテンツ ({% block body %} 内) の重なりが常に発生し、修正方法がわかりません。誰かアイデアをお持ちですか?

ベストアンサー1

これは回答が選択されていない古いトピックです。

私は新しい Bootstrap テンプレートを使用しており、現在のテーマをセクションごとに Bootstrap に移植しています :)

固定ヘッダーがあり、フッターを一番下にロックしたいのですが全て何度も。動作していましたが、レスポンシブに表示するためにサイズを変更すると、フッターがコンテンツに重なってしまいました。「コンテンツ」と「フッター」の間にパディング/スペースが必要だったので、ごちゃごちゃして見えませんでした。

body タグの margin-bottom は機能せず、フッターの下に隙間が追加されました。「body」タグで margin がどのように動作するかを考えると、それは当然のことです。

正解は、body タグに「padding-bottom」を使用することです。この小さなパディング/間隔を確保するために、フッターの高さより 6 ピクセル大きいサイズを使用しました。

body {
    padding-bottom: 120px;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 114px;
}

もちろん、身長は異なります。お役に立てれば幸いです。

おすすめ記事