粘滯頁腳無法正常工作

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 sticky-footer方法看起來很簡單，真是一場惡夢。上面的@尤瑟夫解決方案更簡單明瞭。我做了這樣的變化也實現這段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"; 
    } 
} 

只要優素福的CSS頁腳中還含有clear: both;，當有沒有滾動窗口頁腳股利將在下面的自動對齊main-content div（並在html body標籤中設置onload = "setFooter();"）。

如果有是窗口中的滾動條，滾動變量計算的差值將是溢出的整數量（有關更多信息，請參閱我的問題：Why are scrollTop, pageYOffset, and height all not working?）。

觀看這些視頻以實現包裝，主要內容和頁腳divs：http://www.youtube.com/watch?v=JnhoQ-aLfvE&src_vid=UpZbLIfHSMw&annotation_id=annotation_777473&feature=iv