Archives par mot-clé : bootstrap

Footer fixé en bas ultra simple avec CSS3

Publié le par
Répondre

Bonjour bonjour !

J’en suis sûr, toi aussi tu t’es pris la tête sur ce foutu footer qui doit rester en bas même si le contenu n’est pas assez important ! Tu as mis du JS si tu étais un peu bourrin, ou tu as joué avec la technique du positon absolute et margin-top négatif, mais c’était lourd si ton footer changeait de taille, et puis c’était pas responsive…

Réjouis toi camarade, CSS3 pense à toi avec FLEX !

Flex, comment ça marche ? Et bien encore plus simplement que les tableaux.

D’abords prenons un squelette html5 simple :

<html>
  <body>
    <header>
      <h1>Mysterty propose un super site</h1>
    </header>
    <main>
      <p>
        voilà notre super site, merci Mysterty
      </p>
    </main>
    <footer>
      <p>
        et le footer fixé en bas
      </p>
      <p>
        fourni par <a href="https://www.mysterty.com/" title="mysterty, développeur web">notre partenaire</a>
      </p>
    </footer>
  </body>
</html>

Un header, un main, un footer, le tout dans un body, c’est tout ce dont on a besoin. Le reste c’est du CSS. L’idée va simplement être de définir le body comme une boite « FLEX », c’est à dire que son contenu sera adaptable, et de définir sa direction en « colonne » car on veut mettre le footer en bas (et on oublie pas de définir sa taille à 100% du support 😉 ).

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

On a fait 90% du job en 3 directives ! On a plus qu’à caler le footer en bas. Pour celà, il suffit de définir que sa marge « haute » doit être de la totalité de l’espace disponible (si espace disponible il y a) :

footer {
	margin-top: auto;
}

Et voilà, vous avez un footer parfaitement adaptable, complètement responsive ready !

Petit plus si vous utilisez Bootstrap 4, tout est déjà prêt, vous n’avez que 2 chose à faire : définir la taille du body et le margin-auto du footer 😉

Enjoy !