1

$(".container").height($(document).height());コンテナの設定に使用して100% heightいますが、上記の行をfooter一番下に配置するように調整する方法はありますか？

私はこれをTBSで処理しようとしています

4

1 に答える 1

3

秘訣は、フッターを下部に固定することです.wrapper。メインコンテンツ領域を含むクラスを作成して、メインコンテナーとフッターの両方を分離します。このようなもの：

HTML

<div class="navbar navbar-fixed-top">
  ... fixed navbar ...
</div>

<div class="wrapper">
    <div class="container">
      ... main content area ...
    </div> <!-- /container -->
</div>

<footer class="container">
    <div class="row">
        ... footer area ...
    </div>
</footer>

このようにして、.wrapperクラスを使用してフッターを押し下げることができますが、CSSでも必要です。これは、Ryan FaitStickyFooterアプローチを使用して行います。ブートストラップの場合、上部の固定ナビゲーションバーに合わせるには、ブートストラップのデフォルト設定に従って、最初に本体ではなくメインコンテナを押し下げる必要があります。だから私たちはこれを行います：

CSS

.wrapper > .container {
    padding-top: 60px;
}

このようにして、上部のナビゲーションバーを適切な位置にうまく収めることができます。.wrapperその後、フッターに高さを指定し、次のようにコンテナーから負のマージンで同じ幅を削除します。

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -40px;
}

footer {
    height: 40px;
}

ただし、フッターの高さは、コンテナーから削除するものと正確に一致する必要があることに注意してください。したがって.wrapper、フッターに余分なマージン、パディング、または境界線を追加する場合は、.wrapperそれに応じてコンテナーに追加された負のマージンを補正する必要があります。

このアプローチを拡張してブートストラップレスポンシブスタイルシートをサポートするために、次のメディアクエリを追加しました:(固定ナビゲーションバーとインラインになっています）

@media (max-width: 979px) {
    .wrapper > .container {
        padding-top:0;
    }

   .wrapper {
        height:auto;
        margin:auto;
        min-height:0;
   }
}

これは、このアプローチの短いデモです。この方法は、ブートストラップからの流体コンテナと固定コンテナの両方で機能するはずです。

デモ、ここで編集。

于 2012-06-14T12:08:55.357 に答える