Pied de page qui ne se place pas en bas de la page...

Résolu/Fermé
chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 - 17 mai 2013 à 14:17
chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 - 23 mai 2013 à 10:15
Bonjour,

Les pages de mon site sont composées de 3 div, <div id="entete">, <div id="corps">, <div id="pied_de_page">, qui se succèdent les unes à la suite des autres dans la div <body>

J'ai donné une min-height: 100% à la div "corps" dans le CSS, et malgré cela lorsque le texte de la page est très court, le "corps" ne descend pas jusqu'en bas et le pied de page se retrouve au milieu de la page.

Je tourne en rond depuis un moment, si quelqu'un voit d'o vient le problème?

Merci d'avance :)

Code CSS:
body
{	
	font-family: "trebuchet ms", sans-serif;
	margin: 0px;
	text-align: justify;	
	background: url("papier.jpg");	
} 

#corps
{
	min-height: 600px;
	font-size: 16px;
	color: #B81B16; 
	padding: 20px;
}

#page
{
	width: 970px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px 60px 40px 60px;
	background: rgba(255,246,215,0.5);
	border-radius: 25px;
}

#pied_de_page
{
	background: #B81B16;
	margin-left: auto;
	margin-right: auto;
	border-top: 4px solid #B81B16;
	margin-top: 20px;
	box-shadow: 0px -1px 10px 8px #711E00; 
	width: 100%;
}



Page HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
				
		<title>Mon titre</title>
	</head>
	
	<body>
		
		<div id="entete">
			<h1>Titre site</h1>	
		</div>
		
		<div id="corps">	
			<div id="page">
				<h2>Titre</h2>
				<p>Blablabla</p>
			</div>			
		</div>
		
		<div id="pied_de_page">
			<p>Blablabla</p>
		</div>
	</body>
</html>

A voir également:

3 réponses

chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 30
Modifié par krazykat le 23/05/2013 à 11:10
Le site est (supprimé par la modération à la demande de l'auteur)

Et non, je ne veux pas que le footer soit toujours visible, je veux qu'il apparaisse en bas de la page quand on descend avec l'ascenseur (si la page est longue), et que le corps descende au moins jusqu'en bas de l'écran (si la page est courte), et que du coup le footer apparaisse tout en bas.

Sur un petit écran tout est ok, mais sur un grand écran le corps ne descend pas jusqu'en bas de l'écran et le pied de page se retrouve au milieu.

Merci!

Quelques bases en javascript, débute en php/mySQL
J'essaie de mettre en ligne mon arbre généalogique.
1
Profil bloqué
17 mai 2013 à 18:28
Salut,

Si tu l'avais en ligne ce serait plus rapide pour t'aider.

Tu veux que ton footer soit toujours en bas de l'écran ? Si c'est le cas, il faut mettre position:fixed;bottom:0px; dans le css du div du footer.
0
chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 30
19 mai 2013 à 14:34
Problème résolu, merci!
-1
Profil bloqué
19 mai 2013 à 14:35
Poste ta solution, si jamais d'autres ont le même problème !
0
chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 30
23 mai 2013 à 10:15
En fait, en lisant des trucs par ci par la j'ai réalisé que ne mettre le pied de page en bas de l'écran a tout prix (quelque soit la hauteur du contenu du texte) ne se fait pas. Je n'ai d'ailleurs pas réussi à le faire.

Visiblement, le plus correct c'est de coller le pied de page au corps de la page, puis accepter le fait qu'il y ai le fond qui continue "tout seul" jusqu'en bas de l'écran.
Voili voilou!
0