css - CSS スティッキーフッター + 960 グリッドレイアウトでブロックをオーバーラップ

Question

固定フッターは期待どおりに機能します。コンテンツペインが空の場合、フッターはビューポートの下部に固定され、いっぱいになるとフッターが押し下げられます。

960 グリッドシステムで css スティッキーフッターコードを使用していますが、サイドバー内のコンテンツが展開されてフッターに到達すると、フッターがサイドバーコンテンツの末尾に重なってしまいます。

どこが間違っているのか、どうすればこの問題を解決できるのでしょうか?

score 2 · Accepted Answer

StickyFooter を誤用しています。ラッパーには、本文コンテンツがフッターと重ならないように保護するための追加レベルの定義がありません。

これを解決するには、mainid を body-content レベル (この場合は 960gs コンテナー) に追加して、以下に対応します。

<div id="wrap">
    <div class="container_12" id="main">
        <!-- ... -->
    </div>
</div>

参照：

score 0 · Accepted Answer

このようにコンテナにmargin-bottomを追加すると

.container_12 {
    margin-bottom: 100px;
    }

#footerこれは持っていることを補償しますmargin-top: -100px

score 0 · Accepted Answer

リンクは問題ないようです。あなたはそれを修正したようです。そして、私が提案しようとしていたフッターに css が埋め込まれています: clear:both.

css - CSS スティッキー フッター + 960 グリッド レイアウトでブロックをオーバーラップ