0

Alright, Folks, I'm driving myself batty with this one.

For a client, I've been making loads of sites with Genesis & WordPress. However, on certain sites the theme doesn't look fantastic without a sticky footer.

The problem is that no good sticky footer seems to be around specifically for Genesis. This results in what you see here on the homepage:

Essentially, the content isn't long enough, so the footer doesn't rest at the bottom, usual suspects, etc. I've tried editing functions.php in conjunction with CSS, I've tried raw CSS fixes, and I've also tried some jQuery footers. No such luck.

The fix I'm using now that works is this: 

/* 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;}

It works alright, but it's just not accurate enough for my taste. You can view what it's doing at this site

So here's my question:

What's the best way to make a footer stick to the bottom of the page in Genesis when content is not long enough?

I'm amazed it's been this dang hard, so I'm assuming I'm just missing something. Surely other people are doing this and have a fix running.

Any thoughts (CSS or jQuery) are appreciated! Seriously done losing sleep over this one.

4

3 回答 3

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;

}

于 2014-07-09T01:14:19.903 回答
0

你可以尝试这样的事情：

body{
    position:relative;
    height:100%
}
footer{
    position:absolute;
    top:100%;
    margin-top:-66px;
}
于 2013-05-02T06:15:14.483 回答
0

其实这个是我自己整理的！

这不是一个完美的解决方案，因为它使用 jQuery 而不是纯 CSS。但是，如果您使用的是 Genesis 框架并且需要一个粘性页脚修复，那么它非常简单。

只需下载我整理的这个插件，正常安装，然后激活即可。假设您已按照 README.txt 中的说明进行操作，那么一切都会变好！

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

这是实际插件的链接：

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

快乐主题！

于 2013-05-20T23:23:34.710 回答