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将页脚粘贴到页面底部

回答

相关问题