jQuery 粘性页脚

Question

詹姆斯来了!我已经尝试了大约两个小时来获得粘性页脚，但我似乎一直搞乱 CSS。我正在寻找 jQuery 可以处理的脚本。我了解大多数脚本的工作原理(这很令人惊讶，因为我刚刚学习)，但无论页脚的高度是多少，我都需要脚本工作，因为它没有在我的页面的 CSS 文件。有人能够提供粘性页脚的工作脚本吗？我希望页脚本身始终位于页面底部，但不是固定位置。内容元素是#posts，页脚区域是ID为#bottom的元素。这是一个页面示例:JTB Permalink Page

Answer 1

好的。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() 函数可能无法正常工作，因此请小心填充和边距(只需将边距/填充值添加到“footer_height”即可)。