6

http://www.cssstickyfooter.com/からスティッキーフッターを何度も実装しました。唯一の問題は、フッターの高さが固定されていることです。内部のコンテンツに基づいてフッターを拡張できる純粋な CSS ソリューションはありますか?

JS ソリューションは悪くありませんが、CSS が最適です。

助けてくれてありがとう。

4

7 に答える 7

5

別の方法 — http://pixelsvsbytes.com/blog/2011/09/sticky-footers-the-flexible-way/

于 2011-11-10T17:05:18.363 に答える
5

更新された回答

元の回答は 5 年以上前のものであり、フッターの高さが増減した場合にパディングが更新されないという点で失敗します。ウィンドウのサイズ変更イベントにバインドし、すべての火災でこれを呼び出すことができますが、それは少し過剰です。

window.onresize代わりに、イベントにバインドすることをお勧めしますが、スタイルを計算したり、DOM をスラッシングしたり、 1 秒あたり何十回もレイアウトを作成したりしないようにロジックを調整します。

(function () {

    "use strict";

    var body = document.querySelector( "body" );
    var footer = document.querySelector( "footer" );

    window.addEventListener(
        // Throttle logic: http://jsfiddle.net/jonathansampson/7b0neb6p/
        "resize", throttle( adjustContainerPadding(), 500 )
    );

    function adjustContainerPadding () {
        body.style.paddingBottom = window.getComputedStyle( footer ).height;
        return adjustContainerPadding;
    }

}());

ページが読み込まれると、すぐにメソッドを起動しますadjustContainerPadding。このメソッドはpaddingBottom、ボディの を、 の計算された高さに一致するように設定しfooterます。window.getComputedStyleこのメソッドには IE9 以上が必要であることに注意してください。

フィドル: http://jsfiddle.net/jonathansampson/7b0neb6p/

元の回答

(簡単にするために) cssstickyfooter コードを使用し、javascript を介して css 値を設定することをお勧めします (jQuery コードが続きます)。

$(function(){
  var footerHeight = $("#footer").height();
  $("#main").css("padding-bottom", footerHeight);
  $("#footer").css("margin-top", -footerHeight);
});

コードはテストされていませんが、問題なく動作するはずです

フッターにどれだけのコンテンツが含まれていても、これにより CSS 値が自動的にリセットされます。

于 2010-12-12T19:11:18.720 に答える
3

なぜ誰もがこのテクニックを使わないのか、私には本当にわかりません。非常に簡単

高さ、JAVASCRIPT、テーブルの固定なし

コンテンツが増えると拡張し、ない場合は下部にくっつきます

*{
  margin: 0; 
  padding: 0;
}
html, body{
  height: 100%; 
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
}
.content{
  flex: 1;
  background: #ddd;
}
<body>
  <header>
    Header
  </header>
  
  <div class='content'>
    This is the page content
    <br>
    PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the   body css)
  </div>
  
  <footer>
    Footer
  </footer>
</body>

于 2016-11-25T01:39:07.407 に答える
0

すべてのブラウザで動作することを確認してください。

#footer { position:absolute; top:100%; width:100%; }

于 2010-12-12T19:05:39.737 に答える
0

それをチェックしてください、それはあなたにとって役に立ちます

var マージン;
$(関数(){
    var pageHeight = $('#pageKeeper').height();
    var clientHeight = window.innerHeight || document.documentElement.clientHeight;


if (clientHeight > pageHeight) {
    margin = clientHeight - pageHeight;
    if (margin <= 120) {
        $('#footer').css('top', pageHeight + 30)
    }
    else {
        $('#footer').css('top', clientHeight - 90)
    }
}
else {
    margin = pageHeight - clientHeight;
    $('#footer').css('top', pageHeight + 30)
}
$('#footer').show()

}))

于 2010-12-12T19:06:17.610 に答える