0

簡単な作業があります。フッターを一番下に貼り付けます (スティッキー フッター)。

stackoverflow と google でいくつかのスレッドを検索しました。

以下の2つのテクニックがあるようです。

  1. http://ryanfait.com/sticky-footer/layout.css,http://www.cssstickyfooter.com/style.css (すべての要素のパディングとマージンのリセット、ラッパーのストレッチ、両方またはその他の追加の mod のクリア)

  2. 絶対位置決め

最初はハックのように見えます (どちらも機能しませんでした) ので、絶対配置 (下: 0;) に固執したかったのですが、ここでは、大きなコンテンツ (多くの段落) を持つページのフッターが途中でぶら下がっていることを述べました。下にスクロールすると…

ただし、ここにフィドルがあります。誰かが私のエラーを見つけてくれることを願っています: http://jsfiddle.net/379gr/

よろしく

4

2 に答える 2

2

これはFooterStickです: http://jsfiddle.net/jAbw4/。

コードに戻ります。#content_wrapper のプロパティ「位置」を相対に設定します。それ以外の場合、包含ブロックは最初の包含ブロックになります。最初の包含ブロックはビューポートの領域をカバーし、その結果、フッターは質問で説明されているように動作します。

ところで、Cameron Adams は、フッターを配置するためのより堅牢な方法、FooterStickAltについて書いています。古いバージョンの gecko ブラウザーと IE での描画エラーが観察されるため ( FooterStick を使用すると) 、彼は FooterStickAlt を好みます。読み込みプロセス中にコンテンツの高さが大きく変化すると、フッターが正しく配置されません。したがって、たとえば寸法情報を持たない画像が含まれている場合、絶対配置要素は最初に決定された位置に留まり、成長するコンテンツの下に移動しません。FooterStickAlt にはこの問題はありません。

于 2012-05-22T15:10:20.627 に答える
1

それをチェックしてください：http://jsfiddle.net/sTW6t/1/

これは、相対位置でスティッキー フッターを使用するときに少し前に作成したものです。いくつかのjqueryにトリックをさせてください;-)それが行うことは、高さを計算して、フッターがどこにとどまる必要があるかを知ることです。

$(関数() {

function positionFooter() {

    var windowHeight = $(window).height();
    var documentHeight = $('#pagewrap').height();

    if (windowHeight > ($('#content').height() + $('#header').height())) {
        var pagewrapHeight = windowHeight - $('#footer').height();
        $("#pagewrap").height(pagewrapHeight);
    }
}

positionFooter();
$(window).resize(positionFooter)

});

乾杯！

于 2012-05-22T15:09:50.700 に答える