Coller le pied de page en bas

Ce petit tutoriel va vous apprendre une technique toute simple pour faire en sorte que votre pied de page reste collé en bas de page quelque soit la hauteur de votre contenu. Les outils seront HTML et CSS. demo source Code HTML Pour commencer, regardons la globalité du code HTML. Vous pouvez le récupérer. Nous reviendrons dessus plus tard. Mon pied de page reste en bas Unde Rufinus ea tempestate …

 

Ce petit tutoriel va vous apprendre une technique toute simple pour faire en sorte que votre pied de page reste collé en bas de page quelque soit la hauteur de votre contenu. Les outils seront HTML et CSS.

Code HTML

Pour commencer, regardons la globalité du code HTML. Vous pouvez le récupérer. Nous reviendrons dessus plus tard.

Code CSS

Maintenant le code CSS



Explication du code

Par habitude, j’encapsule tout mon code HTML dans une div que je nomme global. Pourquoi. Et bien tout simplement, lorsque je désire centrer mon contenu, j’ai simplement à centrer ma div global par le code CSS margin:0 auto;. Mais si je donne une largeur fixe à cette div global, je ne peux pas faire que mon pied de page soit aussi large que mon écran. C’est pourquoi, pour cet exemple, j’encapsule ma div global dans une div que je nomme superglogal avec les propriétés CSS que nous verrons après.


Du coup, je met ma div pied uniquement dans la superglobal pour que celui-ci ne réagisse uniquement à la largeur de la superglobal.

Il est très important de suivre ce code à la lettre. Tout dabord il faut fixer les tailles du body et de html. Celles-ci en height: 100%; pour prendre tout l’écran. Puis la superglobal en position: relative; et min-height: 100%; pour qu’elle puisse s’étendre en fonction du contenu mais qu’elle est aussi sa place bien à elle.

Pareil pour la div global. Par contre pour celle-ci, on lui rajoute padding-bottom: 70px; pour que le pied, lorsque votre fenêtre de navigateur est réduite, ne vienne pas cacher votre contenu. La valeur de votre padding-bottom correspond à la hauteur que vous aurez donné à votre pied. Si votre pied fait 200px, la valeur du padding devra être au minimum égale à 200px.

Pour finir, regardons le code de la div pied. position: absolute; pour qu’il ne réagisse qu’en fonction de son parent et ne laisse pas de trace invisible et décale tout le reste. bottom: 0; pour qu’il se plaque en bas de la page et y reste. Sans oublier height: 50px; sa hauteur fixe.

Voila pour ce tutoriel. N’hésitez pas à améliorer ce code et surtout à faire quelque chose de bon à voir.

5 commentaires

S'abonner au RSS des commentaires
  1. leymiris
    Posté le 21/06/2010 à 18h07

    Hello,
    Je me suis retrouver dans la même situation ou, avec des div supplémentaire dans le global et afin de régler le soucis du pied-de-page qui passe par dessus les div j’ai ajouté

    <div style="clear:both"></div>

    Juste avant celui-ci, ce qui à régler le soucis pour moi smile

  2. day-n
    Posté le 04/04/2009 à 0h40

    Bonjour,

    Si on veut rajouter du contenu flottant dans le bloc "global", le "pied" ne se colle plus au bas de la page, quelqu’un serait comment faire?

    <div id="superglobal">
    <div id="global">
    <div id="contenu">
    <!– flottant à gauche –>
    </div>

    <div id="colonne_droite">
    <!– flottant à droite –>
    </div>
    </div>
    <div id="pied">

    </div>
    </div>

    J’aimerais réalisé une structure à peu près comme celle de ce site.

    Merci d’avance

  3. Stephane
    Posté le 25/03/2009 à 15h40

    Merci pour le lien, les gabarits sont bien fait et peuvent être très utiles.

  4. gcyrillus
    Posté le 24/03/2009 à 17h20

    Bonjour,

    Pour completer ce tutoriel j’ajouterais ceux-ci :
    http://yidille.free.fr/plux/valign/?9-pied-en-bas-de-fenetre

    Ou l’on peut faire le choix d’avoir un entete et ou pied en position fixe ou coulissante .

    La page demontre aussi que les techniques mise en oeuvre pour placer un pied au plus haut au bas de son conteneu (fenetre du navigateur) , fonctionne tout aussi bien dans un element ou portion de pages et est réutilisable , comme un "objet" .

    Amateurs de gabarits , ce site en propose d’autres qui se veulent débuggé pour IE 6/7 , FF2 et inferieurs …

    GC

  5. Tazzytazz
    Posté le 17/02/2009 à 18h43

    [citation][de]Réponse à François:[/de]Super ca marche pas sur Firefox 1.5…grrr!!!!!

    rooo la boutade [/citation]

    Et tu peux pas télécharger un autre Firefox ? ^^

Laisser un commentaire

Votre e-mail ne sera jamais publié ni communiqué. Les champs obligatoires sont indiqués par *

*
*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>