28172 sujets

CSS et mise en forme, CSS3

Footer toujours aligné en bas

Bonjour,
J'aimerais avoir un footer qui soit toujours aligné en bas. Comment puis-je faire cela ? Car actuellement, si le contenu de ma page n'est pas assez "grand", mon footer est affiché au milieu de la page, ce qui n'est pas très joli. Quelles structures html/css utilisez-vous pour contrer ce genre de problème ?
Bonjour ^^
Oui la question a été traitée mais la réponse ne me convient pas. J'utilise le framework CSS materializeCSS, et j'aimerais donc travailler sur la balise <footer> convenablement. Si je mets du fixed, le footer est toujours présent en bas de la page, ce n'est pas ce que je désire, ce que j'aimerais c'est que si le contenu de la page est trop "petit", le footer n'est pas afficher au milieu de la page mais bel et bien en bas de celle-ci.
J'ai finalement trouvé une solution permettant d'avoir un "sticky footer" en utilisant du flex.


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

 #main {
    flex: 1 0 auto;
  }


Le sujet est donc clos, merci pour ta réponse Greg Smiley smile
2010… ça nous rajeunis pas tout ça ^^.

Sauf que tu utilises des vh & du flex. Ce qui fait 2 polyfills à ajouter. Ce qui peut être assez gourmand pour des vieux navigateurs.

Une autre technique existe, moins sexy, moins actuelle, mais qui ne nécessite aucun polyfill. http://ryanfait.com/sticky-footer/ . C'est d'ailleurs de celle là que je parle dans mon autre poste il me semble Smiley smile .
Modérateur
Pour une base incluant quelque vieux nav et qui reste fluide quelque soit le contenu ou le font-size du pied de page , j'opterais plutôt pour du display:table/table-cell/table-footer-group; un codepen pour jouer avec : http://codepen.io/gcyrillus/pen/YqPOMZ 

/* base pied bas de page glissant */
/* 
<html>
<body>
<div class="main">
 contenu principal 
</div>
<div class="footer">
  <div>
  Pied bas de page élastique
  </div>
</div>
</body>
</html>*/
/* BASE CSS */
html,
body {
  height: 100%;
  width: 100%;
  margin: auto;
}

body {
  table-layout: fixed;
  /* keep width size as set */
  display: table;
}

.main {
  display: table-cell;
  background: yellow
}

.footer {
  display: table-footer-group;
  height: 1%;
}
/* fin BASE */

/* mise en page particuliere */
body {
  width: 80%;
  /* option */
  margin: auto;
}

.footer {
  background: tomato;
  text-align: center;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  min-width: 5%;
}
Sujet clos
Aller à