28172 sujets

CSS et mise en forme, CSS3

Footer qui reste en bas de page mais pas fixe

Bonsoir,
ca fait assez longtemps que je n'ai pas codé du coup j'suis vraiment perdue là.
Je souhaiterais faire en sorte que mon footer reste en bas de page quelque soit la hauteur de mon contenu.
Ex : contenu réduit, footer visible en bas de page.
Au cas où beaucoup de contenu, footer visible seulement après avoir scrollé toute la page.
J'ai mis le footer en absolu mais évidement il passe par-dessus ma div contenu si je charge trop ma page.

voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="banniere">
	</div>
	<div class="contenu">
	</div>
	<div class="footer">
	</div>
</body>
</html>




body {
	margin:0;
	padding:0;
}

.banniere {
	height: 300px;
	background-color: #FF0000;
}
.contenu {
	background-color: #0000FF;
	height: 100px;
	width: 500px;
}
.footer {
	height: 50px;
	background-color: #FF00FF;
	bottom: 0px;
}


Si quelqu'un pouvait m'aider ca serait vraiment cool ^^
merci d'avance et bon confinement les gens Smiley cligne
Modérateur
Salut,

C'est très bien comme ça il te mande juste un padding-bottom de 50px sur le body pour pas que ca chevauche ton contenu.
Ou un padding de 50px en bas de ton contenu.
Ou un margin (mais en bas de page il y a un conflit avec l'overflow du body je crois, enfin rien d'insurmontable mais c'est moins simple).

Bonne soirée
Modérateur
Bonjour,

tu peut te servir de flex, margin-top:auto et de min-height éventuellement.

exemple possible de maj de ton code :
body {
  	min-height:100vh;
  	display:flex;
  	flex-direction:column;
}

.footer {
	margin-top:auto;
}


Cdt,
Modifié par gcyrillus (10 Apr 2020 - 19:58)
Merci pour vos réponses.
Beaucoup trop de travail en ce moment avec ce virus.
Je remets ca à plus tard^^
Sujet clos
Aller à