Pied de page html qui doit rester en bas [Résolu/Fermé]

Signaler
Messages postés
44
Date d'inscription
samedi 25 avril 2015
Statut
Membre
Dernière intervention
2 janvier 2016
-
animostab
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour, sur mon site j'ai ce code html (modifié) :
<div class="contenu">
du texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenudu texte et contenu
</div>
<footer>Pied de page</footer>

avec ce code css :
.contenu {margin-bottom: 30px;}

footer {text-align: center;
height: 30px;
background-color: #f7b900;}

et je voudrais que mon pied de page se retrouve toujours en bas de la page peut importe la grandeur et sans "position:fixed".

Merci d'avance!

1 réponse

Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
533
Salut
Si tu veux que ton footer soit toujours collé en bas quelque soit la hauteur de page et la position du scroll je ne vois pas comment faire sans la position:fixed !
Pourquoi donc pas de position fixed ? explique ....
youssef.allmlg
Messages postés
44
Date d'inscription
samedi 25 avril 2015
Statut
Membre
Dernière intervention
2 janvier 2016

Je ne cherche pas à ce qu'il soit toujours en bas de la fenêtre, je veux qu'il soit en bas de la page comme sur le site de comment ça marche (ce site). Je ne veux donc pas de position fixed car avec, il reste toujours en bas de la fenêtre.
animostab
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
533
Et bien ton code le place en bas de la page mais si la page est moins haute que la fenêtre ton footer ne sera pas en bas de la fenetre.
sinon il y a la propriété min-height en % que tu peux appliquer à body

exemple
html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}
contenu {
height:auto;
min-height:80%;
}
footer {
height:20%;
}
youssef.allmlg
Messages postés
44
Date d'inscription
samedi 25 avril 2015
Statut
Membre
Dernière intervention
2 janvier 2016

ça ne fonctionne pas car tous mes éléments qui se retrouvent dans "contenu" on des position: absolute pour les déplacer dans la page.
animostab
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
533
Normalement ca devrait fonctionner si contenu et footer sont mis en relative, après tu n'a pas parlé d'élément en absolute donc sache que pour un element, absolute fait sortir cet élément et ses enfants hors du flux et donc les tailles de ces éléments ne rentrent pas en considération pour la détermination des height de ce que est dans le flux.