28172 sujets

CSS et mise en forme, CSS3

[Résolu] Empêcher un footer de remonter

Bonjour à tous !
Je rencontre un petit souci avec un footer. Lorsque le contenu de ma page dépasse la hauteur de l'écran, je scroll vers le bas et le scroll s'arrête au footer puisque c'est le dernier élément. On retrouve donc bien le footer plaqué en bas de l'écran et c'est parfait.
Or, suivant comment le contenu de ma page s'agence en fonction de la largeur de l'écran, la hauteur du contenu total de ma page peut être plus petite que la hauteur de l'écran. Dans ces conditions je me retrouve avec un footer plus haut que le bas de page. Et ça, je ne veux pas.
Je voudrais que le footer puisse disparaître si la hauteur de mon contenu est trop grande pour l'écran mais que sa position la plus haute soit le bas de l'écran. Quitte à ce qu'il y ait un espace vide entre le footer et le contenu qu'il y a au-dessus.

J'ai essayé avec "position: sticky;" et "bottom: 0;" mais ça me maintien le footer toujours visible et ce n'est pas ce que je veux.

Vous auriez une piste pour obtenir le comportement souhaité ?

Je vous remercie par avance ! Smiley cligne
Bonjour,

Il existe plusieurs solutions pour arriver à ce résultat, dont au moins 3 solutions "propres" :
- en display table
- en flexbox
- en gridlayout

Voici l'exemple en grid layout puisque, à terme, il s'agit de la solution ultime dédiée au templating :
<body>
  <nav>nav</nav>
  <main>main</main>
  <footer>footer</footer>
</body>

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Le secret de la solution est ici. */
  min-height: 100vh;
  margin: 0;
}

/* for demo: */

body * {
  padding: 1em;
  font-family: Arial;
  color: white;
}

nav {
  background-color: steelBlue;
}

main {
  background-color: orange;
}

footer {
  background-color: tomato;
}

Le code en ligne pour cette solution grid layout : CodePen

A titre informatif voici une solution avec flex : CodePen
Modifié par Olivier C (03 May 2022 - 21:28)
J'ai une autre question par rapport à tout ça.
J'ai appliqué la solution avec grid et ça marche nickel, cependant un souci demeure : on met une min-height à 100vh pour le body. Or, sur mobile, cette valeur va englober l'en-tête du navigateur (avec les onglets et la barre d'adresse). Du coup le footer se retrouve décalé vers le bas de la hauteur de l'en-tête du navigateur. Ce n'est pas trop l'effet attendu...

Le truc c'est que tous les navigateurs ne doivent pas avoir la même taille d'en-tête et puis ça doit aussi changé suivent le périphérique utilisé.
Du coup on remédie à ça comment ?
Modifié par Vahia (04 May 2022 - 12:40)
Modérateur
Bonjour,

Tu peut voir à tester et te rabattre sur un plus classique (sans garanties) 
html{height:100%;}body{min-height:100%;margin:0;}
si cela évite le défaut.
Faire aussi un reset sur le box-sizing si ce n’est déjà fait.

entre-temps, tu peut aussi, via les mediaqueries, par exemple ne pas appliqué de min-height à body sur les orientation portraits et laissé faire (en attendant de trouver une solution ou un compromis acceptable).

Quelle structure et CSS utilises tu ?

Cdt
Modifié par gcyrillus (04 May 2022 - 12:56)
gcyrillus a écrit :
Quelle structure et CSS utilises tu ?

Quelle structure, c'est à dire ?
Je suis sous VSCode et j'utilise du HTML de base, Sass et JS.
Modérateur
Vahia a écrit :

Quelle structure, c'est à dire ?
Je suis sous VSCode et j'utilise du HTML de base, Sass et JS.


Ma question n’était pas aussi intrusive, je parlai de la structure HTML et du CSS associé (ex: ce que t'as proposé Olivier) que tu as choisi d'utiliser.

Est ce que 
html{height:100%;}body{min-height:100%;margin:0;}
change quelque chose ?

Merci Mathieuu pour le lien Smiley cligne

Cdt
Modifié par gcyrillus (04 May 2022 - 14:31)
height: 100% ne fonctionne pas.

J'ai finalement réussi en créant un script JS : 
let container = document.getElementById('container');

adjust();

function adjust() {
    const hDispo = window.innerHeight;
    container.style.minHeight = `${hDispo}px`;
}

Modifié par Vahia (04 May 2022 - 15:36)
Vahia a écrit :
height: 100% ne fonctionne pas.
J'ai finalement réussi en créant un script JS.

Le JS est la bonne méthode pour régler le problème. N'empêche, c'est vrais qu'il faut réinvestir les 100% sur les balises html et body plutôt qu'un min-height 100vh sur le body (moi aussi j'avais finalement cédé à la mode après un peu de résistance), car en effet cette approche pose certains problèmes qui n'apparaissaient pas avec l'ancienne.
Je précise que ce "bug" sur Chrome n'en n'est pas un : ce comportement a été consciemment voulu par Google pour des raisons de performance sur mobile.
Je trouve que les 100% sont quelques fois capricieux. Du coup les vh et vw peuvent sauver la mise. Mais ils apportent d'autres contraintes donc au final ils ne sont pas mieux.

En tout cas merci encore à tous pour votre aide !
Modérateur
Vahia a écrit :
Je trouve que les 100% sont quelques fois capricieux. Du coup les vh et vw peuvent sauver la mise. Mais ils apportent d'autres contraintes donc au final ils ne sont pas mieux.

En tout cas merci encore à tous pour votre aide !


C'est le but du forum Smiley cligne

Pour les height/width:100% , ils ont l'avantage d'inclure les bordures et padding, dans les calculs si le box-sizing est réglé pour , VW,VH,VMAX et VMIN , quand à eux , les ignorent royalement , et si il y a une scrollbar dans le lot... Smiley cligne
Sujet clos
Aller à