0

#wrap と呼ばれる外側の div と、#container と #footer という 2 つの内側の div があります。コンテンツは #container 内にあり、動的です。少ないかもしれないし、多いかもしれない。

コンテンツが最小限の場合、フッター div がページの途中に表示されることがあります。ただし、これはモニター/解像度によって異なります。大きなモニターでは下から 50% ですが、小さい/雑然としたビューポートでは下から 10% しかない場合があります。

この css メソッドを使用する場合:

body,html { height: 100%; }
#wrap     { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer   { position:absolute; bottom:0px; }

その場合、ページは常にビューポートの 100% を使用するように拡張され、フッターはビューポートの下部に表示されます (必要に応じて正確に)。

ただし、コンテンツが増加した場合 (またはビューポートが小さい場合)、フッターは 130px の高さまで拡張されたコンテンツを上書きする可能性があります。フッターは下に落ちません。

これを改善する方法はありますか？

注: フッターの高さは 130px に固定されており、つぶすことができないため、パーセンテージを使用したくありません。

ここに私が実験に使ってきたフィドルがあります

4

1 に答える 1

0

これは、私が見たスティッキー フッターの最良の例です: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

更新 (2017 年 4 月):上記のリンクが機能しなくなったため (元の投稿からかなりの時間が経過したため)、この問題に対する次の解決策を提供したいと思います。

恒久的に修正:

#container {
    padding-bottom: 130px; // ...or more
}

#footer {
    bottom: 0;
    height: 130px;
    position: fixed;
    width: 100%;
}

動的に固定される要素については、次の jQuery プラグインを確認してください: https://libraries.io/bower/jquery-sticky-header-footer

于 2012-10-19T21:30:43.933 に答える