Pied de page collant WordPress Genesis via CSS/jQuery

Très bien, les gens, je me rends fou avec celui-ci.

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?

Je suis étonné que ça ait été si dur, donc je suppose que je manque juste quelque chose. D’autres personnes le font sûrement et ont un correctif en cours d’exécution.

Toutes les pensées (CSS ou jQuery) sont appréciées ! Sérieusement fait perdre le sommeil sur celui-ci.

Solution n°1 trouvée

En fait, j’ai réglé celui-ci moi-même!

Ce n’est pas une solution parfaite, dans la mesure où elle utilise jQuery et non du CSS pur. Mais si vous utilisez Genesis Framework et avez besoin d’un correctif de pied de page collant, c’est incroyablement simple.

Téléchargez simplement ce plugin que j’ai créé, installez-le normalement, puis activez-le. En supposant que vous avez suivi les instructions du fichier README.txt, tout sera en sauce !

Merci à @Shelton pour son aide, ainsi qu’à cet article de Chris Coyier (http://css-tricks.com/snippets/jquery/jquery-sticky-footer/).

Voici le lien vers le plugin actuel :

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

Bonne thématisation !

Solution n°2 trouvée

Cela a très bien fonctionné – j’ai ajouté ceci à la feuille de style CSS personnalisée et – pied de page collant :

.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;

}

Solution n°3 trouvée

Vous pouvez essayer quelque chose comme ceci :

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