jQuery將頁腳粘貼到頁面底部

我花了很多年試圖使用CSS將頁腳粘到頁面底部，並且剛剛放棄。jQuery將頁腳粘貼到頁面底部

我想要的是，如果視口的高度小於HTML文檔的高度，頁腳就不會分配額外的CSS屬性。

如果原稿的高度小於窗口的高度，我想分配到DIV＃thefooter以下CSS：

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

來源

2012-06-09 stackunderflow

你可以通過使用一個對象'.css（{「position」：「fixed」，「bottom」：「0px」，「 margin-left「：」-5px「}）' – Andreas

@安德烈亞斯感謝編輯 – stackunderflow

這只是意味着對未來的暗示：D – Andreas

好，我知道了。不用CSS - 我已經花了很多年時間嘗試這個。

但我有jQuery的工作。問題是$(document).height();正在返回視口的高度，因爲我在我的CSS中使用了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-10 02:29:05 stackunderflow

檢查了這一點，沒有所需的JavaScript在所有...

http://www.cssstickyfooter.com

來源

2012-06-09 21:22:37 alt

我已經嘗試過沒有運氣的堆...... – stackunderflow

我已經使用它很多次成功。繼續嘗試。 – fruitcup

@DuncanNZ不會失去希望，在過去許多次嘗試之後，它終於爲我工作:) –

你能避免在使用Javascript所有使用這種技術：

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

來源

2012-06-09 21:23:39 MaxArt

我也試過堆，但不能讓它與我的網站一起工作。 – stackunderflow

那麼也許你應該解釋你的頁面有什麼，所以你不能使用它。也許一些HTML代碼？ – MaxArt

添加HTML代碼來提問。如果你想看到整個網站是www。鄧肯。 COM – stackunderflow

jQuery有加數據位= 「固定」來解決這個問題。在 - jQuery Mobile: Stick footer to bottom of page

來源

2014-08-18 20:40:24 Brendenw

jQuery將頁腳粘貼到頁面底部

回答

相關問題