Placer le footer en pied de page mais pas en fixed

Frank Hélin
Les bases HTML/CSS

Bonjour,

Je ne trouve pas de solution pour coller 'correctement' un footer en bas de page. Je ne souhaite pas lui attribuer de position 'fixed' car je ne souhaite pas qu'il soit toujours apparent lorsque l'on défile dans la page. J'ai réussi à le placer en bas de page sans fixed, mais le problème est que si j'ai peu de contenu dans une page, une marge blanche (fenêtre arrière du nav.) se dessine entre le bas du footer et le bas de la fenêtre du navigateur. Quelqu'un a une solution ?

Merci par avance !
:-)

10 réponses

1ud0v1c
Réponse acceptée

Salut,

Une autre solution serait d'utiliser la propriété CSS 3 flexbox. En voici un exemple tout simple sur codepen. Le gros avantage étant bien sur d'avoir un footer avec une taille fluide.

Ce qui nous donne par exemple :

Si tu veux en savoir plus sur flexbox, tu peux en trouver une introduction avec les slides de Raphael Goetter. Pourquoi je propose cette solution ? Tout simplement car flexbox c'est l'avenir du CSS les amis !

Carouge10

Bonsoir,
J'essairais de mettre de hauteur min pour ne pas avoir le blanc dont vous parlez.
min-height: 50px;

Frank Hélin
Auteur

Je n'avais pas pensé à min-height qui me vient en secours, mais je pense que la structure de ma page n'est pas assez bonne pour que tout s'ajuste automatiquement en fonction de la taille de la fenêtre. Jevais chercher comment faire mieux...
Merci !

Guklam

position: absolute;
bottom: 0;

Frank Hélin
Auteur

J'ai essayé absolute et relative avec un bottom 0 mais ça ne fonctionne pas car le footer se colle au div supérieur et si celui-ci ne contient quasiment rien alors c'est la marge blanche en bas de page.

betaWeb

As-tu définis une largeur à ton élément ? Puisque celui-ci est en position absolute, il te faut le coller en bas, mais aussi à gauche et à droite.

footer{
  position: absolute;
  width: 100%; height: 50px;
  bottom: 0; left: 0; right: 0;
  /* Reste du CSS... */
}

De plus, il te faut définir l'élément parent à ton footer en position relative, afin que le footer se place relativement à celui-ci.

.footer_parent{
  position: relative;
  /* Reste du CSS... */
}
Huggy

Parfois il faut penser à augmenter la hauteur des conteneurs parent et donc mettre height:100% pour les balises html et body

macinsteph

salut,
Peux tu mettre le code de ta page ?
merci

hugopb82

J'ai eu le même problème que toi, cette solution fonctionne parfaitement
Voilà ce que ça donne : http://codepen.io/chriscoyier/full/uwJjr/
Hugo.

TiimZero1

Merci pour l'astuce en plus, cela fonctionne parfaitement :)