jQuery粘性页脚 [英] jQuery sticky footer

问题描述

詹姆斯在这里！我一直在尝试大约两个小时现在得到一个粘滞的脚，但我似乎不断的搞乱CSS。我在寻找一个jQuery可以处理的脚本。我理解大多数脚本工作（这是令人惊讶的，因为我只是学习），但我需要脚本工作，无论什么高度的页脚是，因为它没有动态高度设置在我的页面的CSS文件。任何人都能够提供一个粘性页脚的工作脚本？我想让页脚本身总是在页面的底部，但没有固定位置。 content元素是#posts，页脚区域是ID为#bottom的元素。这是一个页面示例： JTB永久链接页面

James here! I've been trying for about two hours now to get a sticky footer, but I seem keep messing up the CSS. I'm looking for a script that jQuery can handle. I understand how most of the scripts work (which is surprising, since I'm just learning), but I need the script to work no matter what the height of the footer is, because it doesn't have a dynamic height set in the CSS file of my page. Would anyone be able to supply a working script for a sticky footer? I want the footer itself to always be at the bottom of pages, BUT NOT FIXED POSITION. The content element is #posts, and the footer area is a element with the ID of #bottom. Here is a page example: JTB Permalink Page

推荐答案

好的。
HTML：

Ok. HTML:

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

CSS：

#container {
    min-height: 100%;
    position: relative;
    width: 100%;
}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 206px; /* footer height, we will fix that with jquery */
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0px;
    height: 206px; /* footer height if any */
}

jQuery：

$(document).ready(function(){
    var footer_height=$("#footer").height();
    $("#wrapper").css({
        'padding-bottom' : footer_height
    });
});

我必须警告你，jquery .height（）函数可能无法正常工作，所以小心paddings和边距（只是为'footer_height'添加边距/填充值，你应该很好）。

I must warn you, jquery .height() function may not work properly so be careful with paddings and margins (just add margin/padding values to 'footer_height' and you should be fine).

这篇关于jQuery粘性页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！