28172 sujets

CSS et mise en forme, CSS3

Footer toujours en bas de page

Bonjour,
Tout d'abord, je veux m'excuser, car je sais que ce sujet est récurrent, mais malgré les nombreux forums et cours disponible, je n'ai pas trouvé de code qui réalisait ce que je voulais :
je voudrais un footer qui s'adapte en fonction de la page, quand il n'y a pas de scrollbar le footer est en bas (pour cela on peut faire un margin-bottom : 0). Mais je veux un footer qui lorsqu'il y a une scrollbar se trouve en bas de page mais pas en fixed c'est à dire qu'on le voit uniquement à la fin de la page.
J'aimerai donc qu'il combine ces deux options.

Merci d'avance pour votre aide, cordialement Sr3thore.
Bonsoir.
Mon opinion est que, pour satisfaire à vos conditions, le footer est toujours au bas de la page mais pour prendre en compte le cas où la page risque de ne pas faire la totalité de l'écran, il faut qu'elle ait une hauteur minimale avec un 'min-height'...
Smiley smile
Je pense aussi qu'un min-height va s'imposer sinon il faudra faire avec Javascript.
<body>
<div class="header">Pas ma tête</div>
<div class="main"> Et blabla, blabla, ...</div>
<div class="footer">C'est le pied !</div>
</body>

body { --footer-height: 2rem; }
div.main { min-height: calc(100vh - var(--footer-height)); }
div.footer { height: var(--footer-height); }

Ajuster la variable --footer-height selon les besoins.
Remarquez au passage que l'on pouvait déjà réaliser cela avec le modèle tabulaire (`display : table-row`)...
Modérateur
Olivier C a écrit :
Remarquez au passage que l'on pouvait déjà réaliser cela avec le modèle tabulaire (`display : table-row`)...

Et avant avec un simple position: absolute Smiley smile mais c'était un peu plus bricole oui
Oui. L'inconvénient de ce dernier étant que le footer passait devant le contenu central dans tous les cas de figure.
Sujet clos
Aller à