web-dev-qa-db-ja.com

常に下部に表示されるフローティングフッター

次のようなウェブサイトがあります： >> website << 。メインとフッターの2つのフレームから構築されます。フレームなしで動作するようにしようとしていました（携帯電話では動作しません）。常に表示されるようにフッターを下部に貼り付ける簡単なCSSまたはjQueryメソッドはありますか？その効果は上記のウェブサイトのようなものですか？ cssを使用しようとしていましたが、フッターはスクロールダウンしたときにのみ表示されます。フッターが実際のコンテンツをカバーするようにしたいので、例えば50ピクセルの高さで、常に画面の下部に表示されます。ページの高さが10000pxであっても。それは簡単なことだと思いますが、どこかで迷子になりました。よろしくお願いします

css-floatfootersticky-footer
28
Piotr Ciszewski

はい。それはposition: fixedプロパティ。

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
}

デモ： http://jsfiddle.net/ZsnuZ/

52
Christian Varga
(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
3
Sam Jones

サムジョーンズからの続き：

基本的に、これはドキュメントの高さがウィンドウを埋めるかどうかを確認し、ウィンドウよりも小さい場合はウィンドウの下部に、ドキュメントがウィンドウのサイズよりも大きい場合はウィンドウの下部に添付しますドキュメント（したがって、一番下までスクロールしたときにのみ表示されます）。

ウィンドウのサイズを変更すると、再計算され、すべてが正常に機能するはずです！

[〜＃〜] css [〜＃〜]

#footer {
  bottom: 0px;
}

[〜＃〜] html [〜＃〜]

<div id="footer">
  Footer content
</div>
<script>
  var footerResize = function() {
    $('#footer').css('position', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
  };
  $(window).resize(footerResize).ready(footerResize);
</script>
1
FuzzyJulz

以下のコードを使用して、高さを比較し、下部にフッターを設定することもできます。

 $(document).ready(function(){
    if($("body").height() < $(window).innerHeight()) {
                    $('#footer').css('position','fixed');
                    $('#footer').css('bottom',0);
    }
 });
0
brax7