jQuery粘性页脚
詹姆斯在这！ 我已经尝试了大约两个小时来获得一个粘性页脚，但我似乎一直搞乱CSS。 我正在寻找jQuery可以处理的脚本。 我理解大多数脚本是如何工作的（这是令人惊讶的，因为我只是在学习），但我需要脚本才能工作，无论页脚的高度是多少，因为它没有设置动态高度。我的页面的CSS文件。 有人能够为粘性页脚提供工作脚本吗？ 我希望页脚本身始终位于页面底部，但不是固定位置。 内容元素是#posts，页脚区域是ID为#bottom的元素。 这是一个页面示例： JTB Permalink Page
好。 HTML：
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’，你应该没问题）。
我会把它留在这里
jQuery Sticky footer Header content Content is here!
我刚刚创建了一个有粘性页脚的页面…
这将创建一个页眉和页脚每页55px的页面，页脚粘贴到浏览器窗口的最底部
这就是我最终做的事情：
HTML：
This is a place holder for my content
CSS：
.ui-frame { width: 100%; height: 55px; background: #000000; font-family: Segoe UI, Arial, sans-serif; color: #ffffff; text-align: right; vertical-align: middle; font-size: 16px; } .ui-frame-header { position: absolute; top: 0; } .ui-mainContent { position: absolute; top: 55px; bottom: 55px; background: #ffffff; font-family: Segoe UI, Arial, sans-serif; } .ui-frame-footer { position: absolute; bottom: 0 }
如果我理解正确，则不需要jQuery。 干净利落…
JQuery的
function getWndowSize() { var windows_height=$(windows).height(); var current_height=windows_height-100;/*change values of 100 how much u need based on your requirement*/ $("#wrapper").css({'min-Height' : current_height}); }
码：
试试吧。因为它在我的页面中正常工作。
我知道回答这个问题为时已晚，但对我来说也很难，而且我在这个好地方找到了一些东西，我通过了这个问题，我很乐意分享一个代码帮助了我很多。
您可以在下面的演示中找到它。
我希望这可以帮助别人，因为我总是得到其他人的帮助。
谢谢Stackoverflow。
$(document).ready(function(){ $(window).on("scroll", function() { var footer_height = $( "#footer" ).outerHeight(); var dim_height = $(".dim").outerHeight(); var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { // when scroll to bottom of the page $(".dim").removeClass("dim-fixed"); $(".dim").addClass("dim-static").css({ 'bottom': footer_height, }); }else{ $(".dim").removeClass("dim-static"); $(".dim").addClass("dim-fixed").css({'bottom': 0,}); } }); }); //Document Ready function end
body { margin: 0px auto; background: #ffffff; font-size: 14px; color: #444444; font-family: 'Open Sans', sans-serif; font-weight: 300; } .point1 { width: 100%; margin: 0 auto; } .clearfix:before, .clearfix:after { display: table; content: " "; } #footer { z-index: 104; display: block; } footer.page-footer { width: 100%; background: #333333; color: #fff; border-top: 2px white solid; position: absolute; left: 0; } footer.page-footer > div { padding: 30px 0 40px; min-height: 162px; margin: 0 auto; position: relative; } nav.footer-menu { position: relative; float: left; width: 75%; padding-right: 30px; display: block; } nav.footer-menu > ul { margin-top: -3px; } body:not([class*="static-page"]) ul, body:not([class*="static-page"]) li { list-style: none; } nav.footer-menu > ul > li { display: inline-block; width: 33.33%; margin: 0; padding: 0; border: 0; } nav.footer-menu a { text-decoration: none; color:#fefefe; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 1.071em; padding: 0 10px 8px; vertical-align: top; display: inline-block; } .footer-data { font-size: 0.929em; color: #a0a0a0; overflow: hidden; } /* footer extra menu container*/ .dim-static { position: absolute; margin-left: auto; margin-right: auto; background: #ddd; */ left: 0; right: 0; width: 100%; text-align: center;} .dim-fixed { position: fixed; margin-left: auto; margin-right: auto; background: #ddd; */ left: 0; right: 0; width: 100%; text-align: center; }
DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT DEMO CONTENT Full width Footer menu