スティッキーフッタが正しく機能しない

Question

私はRyan Faitのスティッキーフッタexampleに従っています。何らかの理由で、ブラウザの高さを低くすると、フッタが残りのdivをクリッピングしています。誰もがなぜこれが、私は明らかに何かが不足している知っている、私は以前にこの問題に遭遇していない。

リンク：あなたのフロートをクリアする必要がありhttp://lithbeauty.com/test/

Answer 1

。 .pushクラスにclear:bothを追加するだけです。また、ラッパーの上端と余白を削除する必要があります。これは、高さが100％を超えて強制的に不要なスクロールを作成するためです。

Answer 2

#wrapper{ 
    position:relative; 
    height:auto; 
    min-height:100%; 
} 
#footer{ 
    position:absolute; 
    bottom:0; 
    left:0; 
    width:100%; 
} 

Answer 3

私は、CSSのスティッキーフッタのアプローチが信じられないほどシンプルで悪夢であることを発見しました。 @ユースフの上記の解決策はずっと簡単です。また、私はこのJavaScriptコードを実装し、この上のバリエーションを作った：

function setFooter() 
{ 
    var footer = document.getElementById("footer"); 

    var innerWidth = window.innerWidth; 
    var offsetWidth = document.body.offsetWidth; 

    var scroll = innerWidth - offsetWidth; 

    if(scroll != 0) 
    { 
     footer.style.position = "relative"; 
    } 
    else 
    { 
     footer.style.bottom = 25 + "px"; 
    } 
} 

限りフッターのdiv要素が自動的に下に整列するウィンドウにはスクロールバーがない場合にフッターのユセフのCSSも、clear: both;が含まれているとして、メインコンテンツdiv（また、html bodyタグにonload = "setFooter();"を設定します）。

がウィンドウ内のスクロールバーであるである場合、スクロール変数によって計算される差分はオーバーフローする整数量になります（詳細は私の質問を参照してください：Why are scrollTop, pageYOffset, and height all not working?）。

ラッパー、メインコンテンツ、フッターのdivを実装するための動画をご覧ください。http://www.youtube.com/watch?v=JnhoQ-aLfvE&src_vid=UpZbLIfHSMw&annotation_id=annotation_777473&feature=iv