web-dev-qa-db-fra.com

Thème Wordpress Unite: le pied de page ne colle pas

J'ai toujours essayé de résoudre le problème de la raison pour laquelle mon pied de page ne reste pas au bas de la page, au-dessous de tout le contenu.

Mon thème est Unite. Ce n'est pas en ligne, donc je ne peux pas fournir de lien.

Celui-ci avait le plus de sens, mais cela ne fonctionnait pas, insérant cela dans "colophon", puisqu'il s'agissait de l'ID du pied de page.

http://matthewjamestaylor.com/blog/bottom-footer-demo.htm

Je peux fournir le CSS:

 #colophon {

position: absolute;
    bottom: 0;
    width: 100%;
    height: 75px;
    /*padding: 10px 0;*/
    margin-top: 5px;
    left: 0;
    background-color: #303b23;
}

.footer-nav.nav > li > a:hover {
  background-color: transparent;
}

@media (max-width: 767px) {

    .site-info, .copyright {
      text-align: center;
    }
    .footer-nav.nav, .copyright {
        float: none;

    }
    .carousel-caption {
        display: none;
    }
}

/* Clearing */
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: '';
    display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}

J'y travaille depuis quelques semaines, de temps en temps, et je n'ai aucun succès. Est-ce que quelqu'un peut aider?

Si j'ai besoin d'ajouter plus d'informations pour résoudre ce problème, merci de me le faire savoir.

Merci beaucoup!

1
MJV

Je suppose que #colophon est l'id d'élément de votre wrapper de pied de page? C'est une sorte de nom étrange pour un wrapper de pied de page, mais si c'est ce que c'est alors ok.

position: absolute; concerne l'élément contenant, pas la fenêtre d'affichage.

Comme solution rapide, ajoutez ceci à votre css:

html, body {
    height: 100%;
}

Si cela ne fonctionne pas, il y a des éléments ancestraux dans la chaîne du pied de page qui ne sont pas à hauteur de 100%. Il faudrait avoir la page dans un inspecteur DOM (par exemple, FireBug) pour vraiment voir ce qui se passe ...

0
C C