WordPress : le pied de page du thème swatch ne peut pas coller au bas

J’utilise un thème wordpress gratuit de woothemes, le thème Swatch. Je ne sais pas si quelqu’un utilise ce thème aussi. J’ai un problème. Lorsque les messages sont courts. le pied de page du thème ne peut pas atteindre le bas. A laissé un morceau d’espace vide. C’est tellement moche. Je veux donc trouver une méthode pour y remédier. J’ai lu des livres sur le CSS et j’ai cherché sur Google plusieurs fois, mais je ne trouve toujours pas de moyen. Donc, j’espère que vous pourrez me donner des suggestions. Mes connaissances en programmation sont si pauvres. Désolé. J’espère obtenir votre réponse.

Meilleures salutations.

/* 2.1 Containers & Columns */
#wrapper  { background: transparent url(images/wrapper-bg-colourstrip.png) repeat-x left top; padding-top: 5px; } /* Top padding is the height of the colour strip image. */

#main{width:575px;}
#main.fullwidth, .layout-full #main, .col-full {width: 900px; margin:0 auto;}

#sidebar{width:250px;}
#sidebar .secondary { width:140px; }

.entry img { max-width:565px; }
.layout-full .entry img { max-width:890px; }

.col-left { float: left; }
.col-right { float: right; }

.two-col-right #main { float:right; }
.two-col-right #sidebar { float:left; }



    /* 2.6 Footer */
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;}
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}

#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px;  }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px;  }

Solution n°1 trouvée

Cette démo présente une méthode largement utilisée pour implémenter un pied de page collant http://ryanfait.com/sticky-footer.

La configuration HTML :

<div class="wrapper">
    <!-- Body Content -->
    <div class="push"></div>
</div>

<div class="footer">
    <!-- Footer Content -->
</div>

C’est le CSS qui le fait :

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's   height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

À défaut, vous pouvez essayer de demander de l’aide à WooThemes.