PHPfrance

la communauté d'entraide francophone dédiée au PHP

Une div en guise de footer

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Une div en guise de footer

Re: Une div en guise de footer

par Cyrano » 16 sept. 2011, 16:35

C'est pour le bas de la page, donc padding-bottom et non padding-top ;)

Re: Une div en guise de footer

par foetus69 » 16 sept. 2011, 16:32

Bonjour,

Comme ceci ?
<!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=utf-8" />
<title>Document sans nom</title>
<style>
body{
		padding-top: 2000px;
}

div#page {

	position: absolute;

	top: 0px;

	left: 0px;

	min-height: 100%;

	width: 100%;

}



div#header {

	width: 100%;

	color: #FDFDFD;

	border-bottom: solid 1px #000000;

	background-color : #787889;

}



div#content {

	margin : 10px 100px 10px 100px;

	padding: 0 1.5em 1.5em 0;

	min-height: 100%;

	font-size: 0.9em;

	background-color: #FDFDFD;

}


div#footer{

	width: 100%;

	position: absolute;

	bottom: 0px;

	left: 0px;

	clear: both;

	color: #FDFDFD;

	border-top: solid 1px #000000;

	background-color : #787889;

}
</style>
</head>

	<body>

		<div id="page">

			<div id="header">Header contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader contentHeader content</div>

			<div id="content">Page contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage contentPage con</div>


			<div id="footer">Footer contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contetFooter contet</div>

		</div>

	</body>
</html>
J'ai un doute... :roll:

Re: Une div en guise de footer

par Cyrano » 12 sept. 2011, 11:39

... mais il ne faut pas que le contenu principal soit trop long sinon ca passe sous le footer ^^
Tu peux facilement résoudre ce soucis en ajoutant via CSS un padding de la hauteur de ton div à appliquer sur le body : comme ton footer est en position absolue, ça ne l'affectera pas dans son positionnement, mais le body étant « plus long », la barre de défilement sera adaptée de façon à te permettre de faire monter le contenu complètement au dessus de ce footer :).

Re: Une div en guise de footer

par foetus69 » 12 sept. 2011, 11:13

Bonjour Cyrano,

Merci, oui en effet ça marche du tonnerre ton truc.

J'ai trouvé ça aussi après coup, mais il ne faut pas que le contenu principal soit trop long sinon ca passe sous le footer ^^

http://forum.alsacreations.com/topic-4- ... -page.html

Bisous

Re: Une div en guise de footer

par Cyrano » 11 sept. 2011, 20:56

Bonjour,

Je cherche le moyen de pousser, coller, contraindre une div à se placer en bas de page quelque soit le navigateur, la résolution...

C'est possible ? J'ai essayé de mettre l'height du body à 100% mais ca marche pas.

Merci de votre aide.
La seule solution passe par du JavaScript en mesurant la hauteur de la fenêtre, en plaçant le bloc en question par rapport à cette mesure et en veillant à ce qu'il reste collé en bas lorsqu'on fait monter le contenu avec la barre de défilement vertical (scroll). La propriété « height » n'est pas prise en compte en pur CSS sur l'élément body.

Une div en guise de footer

par foetus69 » 11 sept. 2011, 19:04

Bonjour,

Je cherche le moyen de pousser, coller, contraindre une div à se placer en bas de page quelque soit le navigateur, la résolution...

C'est possible ? J'ai essayé de mettre l'height du body à 100% mais ca marche pas.

Merci de votre aide.