[CSS] Pied de page

**afrodje** · 24/02/2010, 16h05

Bonjour,

Je souhaite faire un pied de page pour l'ensemble de mes pages mais je n'arrive pas à bien le caler en bas, après tout le contenu avec une hauteur variable.

Voici une vue simplifié de mes pages :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<body>
  <div id="div_principal">
        contenu
  </div>
 
  <div id="div_bas_page">
	Mentions Légales
	Conditions Générales de Vente
	FAQ
  </div>
</body>

Voici les css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#div_principal {
	position: absolute;
	top: 0;
	min-height: 90%;
	width: 100%;
	font-size: 14pt;
	font-family: "Segoe UI";
	margin: 0;
	padding: 0;
	min-height: 100%;
}
#div_bas_page{
	color: #FFF;
	position: absolute;
	bottom: 0;
	left: 0;
	clear: both;
	width: 100%;
}

Merci d'avance.

**Marc22** · 24/02/2010, 16h43

Bonjour,

essaye plutôt margin-bottom:0px; dans ton div_bas_page au lieu de bottom.

**afrodje** · 25/02/2010, 09h48

Envoyé par Marc22

Bonjour,

essaye plutôt margin-bottom:0px; dans ton div_bas_page au lieu de bottom.

Même avec margin-bottom:0px;, le bas de page se trouve toujours en haut à gauche...

**afrodje** · 26/02/2010, 09h09

Après plusieurs test, le bas de page est bien en bas mais il ne varie pas en fonction du contenu.

Voici les changements du css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#div_principal {
	position : relative;
	top: 0;
	min-height: 90%;
	width: 100%;
	font-size: 14pt;
	font-family: "Segoe UI";
	margin: 0;
	padding: 0;
	min-height: 100%;
	padding-bottom :55px;
}
 
#div_bas_page{
	position: absolute; 
	bottom : 0;
	color: #FFFFFF;
}

Comment je fais pour avoir le bas de page variable?

**HiRoN** · 26/02/2010, 12h10

Bonjour,

Personnellement, il m'arrive d'utiliser une solution à base de Javascript.

Footer toujours en bas de page (s'ajustant en fonction du contenu, utile dans des page ou il y a peu de contenu).
Si Javascript désactivé, il vient se placer à la suite du flux.

**Macmillenium** · 26/02/2010, 12h13

La FAQ propose une solution

http://css.developpez.com/faq/?page=...ooter_bas_page

[CSS] Pied de page

CSS

Vue hybride

Discussions similaires

Partager

Partager