47

ここで注意すべき点は、フッターの高さが固定されるのではなく、コンテンツによって異なるということです。

私が「スティッキーフッター」と言うとき、「ビューポートの下部よりも高くなることはないが、十分なコンテンツがある場合、ユーザーがスクロールするまで非表示になるフッター」の一般的な定義であると理解している範囲で使用します。見えるくらい下まで降りてください。」</p>

また、レガシー ブラウザをサポートする必要がないことにも注意してください。CSSdisplay: tableと関連するプロパティがここで役立つ場合、それらは公正なゲームです。

4

3 に答える 3

17

あなたは絶対に純粋なCSSでこれを行うことができます。 リンクをクリックします。

この概念display: table-cellでは、通常のではなく、ページセクションを整理しますdisplay: block。

HTML

<body class="Frame">
    <header class="Row"><h1>Catchy header</h1></header>
    <section class="Row Expand"><h2>Awesome content</h2></section>
    <footer class="Row"><h3>Sticky footer</h3></footer>
</body>

CSS

.Frame {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
}
.Row {
    display: table-row;
    height: 1px;
}
.Row.Expand {
    height: auto;
}
于 2012-09-04T01:21:19.877 に答える
-1

次のようにして、フッターをビューポートの下部に貼り付けることができます。

position: fixed;
bottom: 0;

ただし、コンテンツがあっても表示されます。

これを防ぐには、JavaScript が必要です。

(window.onscroll = function() {
    var foot = document.getElementById('footer');
    foot.style.position = "static";
    if( foot.offsetTop < document.documentElement.scrollTop + document.body.scrollTop + document.documentElement.offsetHeight - foot.offsetHeight)
        foot.style.position = "fixed";
})();

((...)();ラッパーは、ページの読み込み時に onscroll 関数を 1 回呼び出すようにします。これも必要なためです)
(上記の関数はテストされていませんが、動作するはずです。動作しない場合はお知らせください。実際のテスト ページを作成します)

于 2012-05-31T00:10:32.297 に答える