すべてのスティッキー フッターでは、フッターを除くすべてのコンテンツをページ ラップ内に配置する必要があります。ヘッダーがページラップの外側に存在する必要がある状況があります:
<div id="header">...</div>
<div id="page-wrap">...</div>
<div id="footer">...</div>
この場合、CSS の補遺がどうなるか知っている人はいますか?
すべてのスティッキー フッターでは、フッターを除くすべてのコンテンツをページ ラップ内に配置する必要があります。ヘッダーがページラップの外側に存在する必要がある状況があります:
<div id="header">...</div>
<div id="page-wrap">...</div>
<div id="footer">...</div>
この場合、CSS の補遺がどうなるか知っている人はいますか?
スティッキーヘッダーとフッターは、CSSプロパティposition:fixedを使用して簡単に実行できます。
次のようなものは機能しませんか?
<div id="page-wrap">
<div id="header">Header stuff</div>
<div id="contents">Actual page innards</div>
</div>
<div id="footer">Footer text</div>
詳細はわかりませんでしたが、#header に何らかのフォーマットを適用しないようにしたいのではないでしょうか。解決策は、そのフォーマットを #page-wrap ではなく #contents に置くことです。実際、フッターを押し下げるために必要なもの以外は、#page-wrap に書式を設定しないでください。
2 番目のラッパー クラスを使用して、粘着性のあるヘッダーとフッターを作成しました。スティッキーヘッダーはラッパー内で問題なく機能しますが、フッターがくっつかないようにするための提案された解決策はたくさんあります。
これらの回避策のいくつかがヘッダーの問題を引き起こしていることがわかりました。提案された回避策の多くを試した後、元のラッパーとまったく同じプロパティを持つ独自のクラスラッパーに両方を貼り付けることで、最小限のコードでページの残りの部分に両方を固定できることがわかりました。