0

CSS を使用してフッターをページの下部に貼り付けようとして何年も費やしてきましたが、ほとんどあきらめていました。

私が望むのは、ビューポートの高さが HTML ドキュメントの高さよりも小さい場合、フッターに追加の CSS プロパティが割り当てられないようにすることです。

ドキュメントの高さがウィンドウの高さよりも小さい場合、次の CSS を div#thefooter に割り当てます。

position: fixed;
bottom: 0px;
margin-left: -5px;

これが私のJSコードです。何もせず、コンソール ログには何も表示されません。

$(document).ready(function(){

  $(window).bind("load", function(){ putFooter(); });
  $(window).resize(function(){ putFooter(); });

  function putFooter(){
    var wh = $(window).height();
    var dh = $(document).height();
    if(dh < wh) {
      $("#thefooter").css({"position": "fixed", "bottom": "0px", "margin-left": "-5px"});
      }
    }

});

編集:そして、これが私のHTMLの外観です:

<div id="allexceptfooter">
  <div id="themenu">...</div>
  <div id="actualcontent">...</div>
</div>
<div id="thefooter">...</div>

全体をご覧になりたい場合は、私のウェブサイト duncannz.com をご覧ください。

4

4 に答える 4

5

これをチェックしてください、javascriptはまったく必要ありません...

http://www.cssstickyfooter.com

于 2012-06-09T21:22:37.157 に答える
1

わかりました。CSSではありません-私はすでにそれを試すのに何年も費やしてきました。

しかし、私はjQueryが機能しています。問題は、CSS で$(document).height();使用しているため、ビューポートの高さを返すことでした。body{ height: 100%; }答えは、次の HTML を使用することでした。

<body>
<div id="everything">
...
</div>
</body>

$("#everything").height();の代わりに使用し$(document).height();ます。残念ながらまだ JS が必要ですが、何もないよりはマシです。私にとってはCSSソリューションは機能しませんでした。

再度編集: 再度更新されたコードは次のとおりです。

$(document).ready(function(){

  function putFooter(){
    var wh = $(window).height();
    var dh = $("#everything").height();
    if(dh < wh - 104) { /*104: #thefooter height in px*/
      $("#thefooter").addClass("footerissticky");
      }
    else {
      $("#thefooter").removeClass("footerissticky");
      }
    }

  putFooter();
  $(window).bind("load", function(){ putFooter(); });
  $(window).resize(function(){ putFooter(); });

});

そしてCSS：

.footerissticky{
  position: fixed;
  bottom: 0px;
  width: 870px;
}
于 2012-06-10T02:29:05.370 に答える
0

この手法を使用すると、Javascript をまったく回避できます。

http://ryanfait.com/sticky-footer/

于 2012-06-09T21:23:39.607 に答える
0

JQuery はこれを解決するためにdata-position="fixed"を追加しました。回答済み - jQuery Mobile: フッターをページの下部に貼り付ける

于 2014-08-18T20:40:24.717 に答える