Css: footer qui reste en bas, independament du contenu

**MatthieuFourcade** · 17/06/2010, 11h34

Bonjour je cherche a faire quelque chose que je n'ai vu que sur le site de dailymotion mais que je n'arrive pas a reproduire:

Avoir un footer qui reste dans le bas de page meme si le contenu n'est pas assez grand.

http://www.dailymotion.com/gb

>> Bcp de contenu, le footer reste bien en bas de le page (normal)

http://www.dailymotion.com/gb/about

>> Pas bcp de contenu, MAIS, le footer reste qd meme en bas ... On se retrouve donc pas avec un barre grise enorme en bas de la page ....

Si quelqu'un a une idee, merci par avance !

Matt

**pop_up** · 17/06/2010, 11h50

essaye ça :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<!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" lang="fr"> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> 
		<title>Hauteur 100%, largeur 80% centré, header, footer, 3 colonnes</title>		
		<style type="text/css"> 
			 <!--
 
			html, body {
				padding : 0;
				margin : 0;
				height : 100%; /* Ces trois paramètres sont nécessaires pour un affichage correct */
			}
 
			body {
				text-align : center;   /* Centrage sous Internet Explorer */
			}
 
			#conteneur {
				position : relative;    /* Obligatoire pour positionner le footer par rapport au conteneur */
				margin : auto;          /* Centrage sous Firefox */
				width : 80%;           /* On définit la largeur du site */
				text-align : left;      /* Reset de la position du texte à cause de IE */
				min-height : 100%;   /* Hauteur minimale de 100% */
				background-color : #DDD;
			}
 
			#haut {
				width : 100%;
				height : 100px;
				background-color : #AAA;
			}
 
			#centre {
				min-height : 100%;         /* Hauteur minimale de 100% */
				overflow : auto;            /* Firefox, pour tenir compte du contenu des div flottants (float, qui sont normalement mis à part) */
				padding-bottom : 50px; /* Hauteur du footer, pour éviter que ce dernier se place par dessus votre contenu (on le pousse) */
			}
 
			#colonnegauche {
				float : left;   /* On aligne les trois colonnes */
				width : 15%; /* Largeur de la colonne */
				background-color : #BBB;
			}
 
			#contenu {
				float : left; /* On aligne les trois colonnes */
			}
 
			#colonnedroite {
				float : right; /* On aligne les trois colonnes */
				width : 15%; /* Largeur de la colonne */
				background-color : #BBB;
			}
 
			#bas {
				position: absolute; /* On le place par rapport au conteneur */
				bottom: 0; left: 0; /* Tout en bas à gauche */
				clear : both;         /* On casse l'alignement float des colonnes */
				width : 100%;      /* Largeur 100% */
				height : 50px;      /* Hauteur du footer */
				background-color : #CCC;
			}
 
			-->
		</style> 
		<!--[if lte IE 6]>
			<style type="text/css">
				#conteneur {
					height: 100%; /* Hauteur 100% pour Internet Explorer */
				}	
 
				#centre {
					margin-bottom : 50px; /* Hauteur du footer, pour éviter que ce dernier se place par dessus votre contenu (on le pousse) */
					padding-bottom : 0;
				}					
			</style>
		<![endif]-->		
	</head> 
	<body> 
		<div id="conteneur"> 
			<div id="haut">Header</div> 
			<div id="centre"> 
				<div id="colonnegauche"> 
					<ul> 
						<li>Menu 1</li> 
						<li>Menu 2</li> 
						<li>Menu 3</li> 
						<li>Menu 4</li> 
						<li>Menu 5</li> 
						<li>Menu 6</li> 
					</ul> 
				</div> 
				<div id="contenu"> 
					<h1>Contenu</h1> 
					<h2>Test 1</h2> 
					<p>test test test test test test test test test test test test test</p> 
					<p>test test test test test test test test test test test test test</p> 
					<p>test test test test test test test test test test test test test</p> 
					<h2>Test 2</h2> 
					<p>test test test test test test test test test test test test test</p> 
					<p>test test test test test test test test test test test test test</p> 
					<p>test test test test test test test test test test test test test</p> 
				</div> 
				<div id="colonnedroite"> 
					<ul> 
						<li>Menu 1</li> 
						<li>Menu 2</li> 
						<li>Menu 3</li> 
						<li>Menu 4</li> 
						<li>Menu 5</li> 
						<li>Menu 6</li> 
					</ul> 
				</div>	
			</div> 
			<div id="bas">Footer</div> 
		</div> 
	</body> 
</html>

**MatthieuFourcade** · 17/06/2010, 13h16

Nickel !

Merci bcp !!!!

**claudiaberger432** · 14/12/2010, 14h07

Bonjour à tous,
Je débute en html/css et le code que pop_up a mis en ligne m'a beaucoup aidé...! Mais j'ai un petit soucis quand à mon footer que je voudrais caler en bas à droite de la page (par rapport au code de pop_up ou le footer est calé en bas à gauche). J'ai pensé qu'en remplaçant simplement le left:0; par right:0; (dans le css de mon footer) ca fonctionnerai mais non

?
Y aurait-il une âme charitable pour m'aider svp ?
Merci!

Css: footer qui reste en bas, independament du contenu

CSS

Vue hybride

Discussions similaires

Partager

Partager