web-dev-qa-db-fra.com

Supprimer l'espace blanc sous le pied de page

Il y a toujours un grand espace blanc vide sous mon pied de page. Comment puis-je m'assurer que la page se termine à la fin du pied de page?

Example

htmlcssfooterremoving-whitespace
15
lagertha281

Il existe trois solutions à ce problème

Dans tous les exemples suivants, je n'ai qu'un modèle HTML extrêmement basique en utilisant seulement trois divisions: en-tête, contenu et pied de page. Toutes les options sont réduites mais devraient fonctionner correctement sur les sites Web plus avancés.

  1. en utilisant la couleur de fond

Définissez pour le corps et le pied de page la même couleur de fond.

body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
  background-color: red;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  background: gray;
  height: 200px;
}
#footer {
  height: 20px;
  background: red; /*Same as body, you could also use transparent */
  color: white;
}
<div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>
  1. en utilisant un pied de page collant

Utilisez un pied de page collant fixé en bas de la fenêtre du navigateur. (Je ne recommanderais pas cette option, car de nombreux utilisateurs n'aiment pas les pieds de page collants. Vous pouvez cependant utiliser un en-tête collant) 

body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  height: 2000px;
}
#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 20px;
  background: #222;
  color: white;
}
<div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>
  1. en utilisant une hauteur minimale pour le conten

Définissez une hauteur minimale pour la div de contenu égale à la hauteur des fenêtres du navigateur moins la hauteur de l'en-tête et du pied de page. (Ceci est mon favori personnel car il fonctionne sur plusieurs navigateurs et est réactif sur tous les écrans) 

body {
  margin: 0px;
  font-family: Arial;
  line-height: 20px;
}
#header {
  height: 20px;
  background: #222;
  color: white;
}
#content {
  min-height: calc(100vh - 40px);
}
#footer {
  height: 20px;
  background: #222;
  color: white;
}
<div id="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>
17
Berendschot

La façon la plus simple d'y parvenir est de définir min-height pour le contenu au-dessus du pied de page comme ceci:

HTML:

<body>
    <section>
        This is content of the page
    </section>
    <footer>
        Text of footer
    </footer>
</body>

CSS:

section {
    min-height: 100vh; /* minus the height of the footer */
}

lien jsfiddle: https://jsfiddle.net/x55xh3v7/

Mais la solution la plus "optimisée" est la technique du pied de page collant qui empêche le pied de page de s'écouler inutilement de la page.

8
cuddlecheek

Cela peut être fait comme ça aussi

#main{
  border:solid;
  height:100vh;
}
#footer{
  border:solid;
}
<div id="main">
Everything here
</div>
<div id="footer">
footer
</div>
5
repzero

Je suggère d'utiliser javascript pour résoudre ce problème, quelque chose comme ceci:

if($(window).height() > $("body").height()){
   $("footer").css("position", "fixed");
} else {
   $("footer").css("position", "static");
}
1
Ryan