18012 sujets

Questions générales et questions de débutants

Footer qui descend automatiquement

Bonjour à tous!
Voila, j'ai lu le tuto suivant http://css.alsacreations.com/Tutoriels-PHP/Inclure-un-fichier-dans-un-autre-grace-a-CSS-et-PHP qui m'a vraiment été une grande utilité.
Mon problème est que je voudrai que le footer (lapartie du bas) descende automatiquement en fonction de la longueur du bloc du milieu (contrairement dans le tuto, où le footer est fixe)
J'ai vu que cette question était fréquemment posée mais restait sans "vraie" réponse.
Merci beaucoup de votre aide! Smiley cligne
il existe un moyen je t'assure pour que ton footer soit toujours en bas de a page sans utiliser de position:fixed avec un contenu très court ou très long.

il faut en premier lieu avoir un conteneur qui fasse bien 100% de la hauteur de ta page ensuite tu place ton footer en relatif en le placant grâce à bottom. (à moin que ce soit avec un margin-top negatif je sais plus. il faut tester pour ça.
bon j'ai retrouvé exactement ce qu'il fallait faire

<html>
	<head>
		<title>blabla</title>
		<style type="text/css">
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
			}
			body {
				width: 100%;
				margin: 0;
				padding: 0;
				font-family: verdana, arial, helvetica, sans serif;
				font-size: 0.9em;
			}
			
			
			div#container {
				margin: 0;
				position: relative;
				min-height: 100%;
			}

			* html #container {height: 100%;}
			
			div#contenu{
				background:red;
				padding-bottom:1em;
			}
			div#footer {
				background:blue;
				position: absolute;
				float:left;
				bottom: 0;
				width:100%;
				background-image:url(../images/pied_fond.gif);
				text-align:center;
				height:2em;
				z-index:2;
			}		
		</style>
	</head>
	<body>
		<div id="container">
			<div id="contenu">
				<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque magna tellus, convallis at, condimentum vel, adipiscing vel, lacus. Cras imperdiet. In vestibulum pede ut est. Vestibulum pharetra blandit felis. Nullam nonummy sem volutpat magna. Quisque condimentum aliquam nisi. Ut tristique.
				</p>
				<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque magna tellus, convallis at, condimentum vel, adipiscing vel, lacus. Cras imperdiet. In vestibulum pede ut est. Vestibulum pharetra blandit felis. Nullam nonummy sem volutpat magna. Quisque condimentum aliquam nisi. Ut tristique.
				</p>
				
				<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque magna tellus, convallis at, condimentum vel, adipiscing vel, lacus. Cras imperdiet. In vestibulum pede ut est. Vestibulum pharetra blandit felis. Nullam nonummy sem volutpat magna. Quisque condimentum aliquam nisi. Ut tristique.
				</p>
				
				<p>
				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque magna tellus, convallis at, condimentum vel, adipiscing vel, lacus. Cras imperdiet. In vestibulum pede ut est. Vestibulum pharetra blandit felis. Nullam nonummy sem volutpat magna. Quisque condimentum aliquam nisi. Ut tristique.
				</p>
			</div>
			<div id="footer">
				mon pied de page ici
			</div>
		</div>	
	</body>
</html>
Salut.

Le comportement que tu cherches à obtenir - si j'ai bien compris - est en réalité le comportement par défaut d'un bloc.

Dans le tutoriel évoqué, le footer est certainement positionné en absolu, de façon à être en bas de la page même si le contenu n'est pas assez long. Il suffit de le laisser dans le flux de la page pour qu'il se place à la suite du reste.

Donc, supprimer la partie 
#footer {
   position: absolute;
   bottom: 0;
}

Si il y a une colonne ou des images positionnés en float, on pourra utiliser 
#footer {
    clear: both;
}
pour obliger le pied de page à s'afficher en dessous des flottants.
Bonjour, et merci de vos réponses si claires, rapides et détaillées! Smiley langue
La méthode fonctionne à merveille! Smiley lol
Modifié par Darkali007 (27 Dec 2006 - 11:22)
Sujet clos
Aller à