通过CSS/jQuery生成WordPress粘性页脚

好了, 伙计们, 我正在用这个驱动自己。

对于一个客户, 我一直使用Genesis和WordPress创建大量网站。但是, 在某些站点上, 如果没有页脚粘稠的主题, 看起来就不会很棒。

问题在于似乎没有专门针对Genesis的良好粘性页脚。这样便可以在首页上看到以下内容：

本质上, 内容还不够长, 因此页脚不会停留在底部, 通常是可疑者, 等等。我尝试将function.php与CSS结合使用, 还尝试了CSS原始修复, 我还尝试了一些jQuery页脚。没有这种运气。

我现在使用的修复有效, 它是这样的：

/* Sticky Footer Fix - It's like "Dirty Dancing" & "Footloose" Had a Baby . . . Mmmmm . . . */

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#wrap {height: 100%;}

#inner {min-height: 79%;
    margin-bottom: 66px; /* must be same height as the footer */
    overflow: hidden;}  

#footer {position: relative;
    margin-top: -66px; /* negative value of footer height */
    height: 66px;
    clear:both;} 

它可以正常工作, 但是对于我的口味来说还不够准确。你可以在此站点上查看其运行情况

所以这是我的问题：

当内容不够长时, 使页脚停留在Genesis页面底部的最佳方法是什么？

我很惊讶这很难, 所以我假设我只是想念一些东西。当然, 其他人正在这样做并且正在运行修复程序。

任何想法(CSS或jQuery)都值得赞赏！认真做完了就失去了睡眠。

#1

效果很好-我将其添加到自定义CSS样式表中-粘贴页脚：

.site-footer {  
     position: fixed;
     bottom: 0px !important;
     width: 100%;
     min-height: 100px; // change to height of your footer
     padding-top: 20px; // change padding to desired amount
     padding-bottom: 20px;
     left: 0;
     margin: 0;

}

#2

你可以尝试这样的事情：

body{
    position:relative;
    height:100%
}
footer{
    position:absolute;
    top:100%;
    margin-top:-66px;
}

#3

实际上, 我已经自己解决了这个问题！

这不是一个完美的解决方案, 因为它使用jQuery而不是纯CSS。但是, 如果你使用的是Genesis Framework, 并且需要一个固定的页脚修复程序, 那么它非常简单。

只需下载我整理好的插件, 按常规安装它, 然后激活即可。假设你已按照README.txt中的说明进行操作, 那么一切都会变得很顺利！

感谢@Shelton的帮助, 以及Chris Coyier的这篇文章(http://css-tricks.com/snippets/jquery/jquery-sticky-footer/)。

这是实际插件的链接：

http://kangabloo.com/Kangabloo/Public/GenesisStickyFooter1.0.zip

主题快乐！