Probleme avec positionement footer (Solution de la FAQ)

**LEK** · 17/10/2009, 15h33

Bonjour,
j'ai essayer de docker le footer en bas de page comme indiquer dans la FAQ. Mais cette solution présente un probleme d'affichage lorsque la page est redimensionné et qu'une barre de scroll apparaît, le footer n'est plus en bas de page... comment éviter ça?
Essayer avec le code suivant qui reprend la description de la FAQ :

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
 
<html>
<style>
html, body {
	margin : 0;
	padding : 0;
	height : 100%;
}
 
#conteneur {
	position : relative; /* référent du footer */
	min-height : 100%;
	background : green;
	width:100%,;
}
 
 
#footer {
	position : absolute;
	width : 100%; /* obligatoire si le footer n'a pas de taille fixe */
	height : 50px; /** hauteur attribuée en tant que padding-bottom pour le conteneur */
	bottom : 0; /* positionner le footer tout en bas **/
	left : 0; /* positionner le footer à gauche **/
	background : red;
}
 
 
#contenu {
	padding-bottom : 50px; /* padding-bottom = hauteur du footer */
	height:200px;
}
 
 
</style>
<!--[if lte IE 6]>
	<style type="text/css" media="screen">
		#conteneur {
			height : 100%;
		}
	</style> 
<![endif]--> 
<body>
  <div id="conteneur">
    <div id="contenu">
 
        <div style="height:125px" id="header">Header</div>
        <div id="center">
              <div style="float:left;height:200px">Center left</div>
              <div style="float:right">Center rigt</div>
        </div>
        <div  id="footer">Footer</div>
 
    </div>
  </div>
</body>
</html>

Merci.

**Macmillenium** · 17/10/2009, 17h19

Bonjour,

Enlève le height:200px (125+200 = 325 et tu n'as pas besoin de renseigner un height) sur #contenu et applique ceci (FAQ) à #center.

Sinon, attention à l'absence d'un doctype dans ton code.

Ce qui donne :

Code xhtml :

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
 
<!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" dir="ltr" lang="fr">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Footer en bas de page</title>
<style type="text/css">
        html, body {
                margin : 0;
                padding : 0;
                height : 100%;
        }
         
        #conteneur {
                position : relative; /* référent du footer */
                min-height : 100%;
                background : green;
                /* width:100%; */
        }
         
        #footer {
                position : absolute;
                width : 100%; /* obligatoire si le footer n'a pas de taille fixe */
                height : 50px; /** hauteur attribuée en tant que padding-bottom pour le conteneur */
                bottom : 0; /* positionner le footer tout en bas **/
                left : 0; /* positionner le footer à gauche **/
                background : red;
        }
         
         
        #contenu {
                padding-bottom : 50px; /* padding-bottom = hauteur du footer */
                /* height:200px; */
        }
        
        #center { 
                overflow:hidden 
        }
 </style>
<!--[if lte IE 6]>
	<style type="text/css" media="screen">
		#conteneur {
			height : 100%
		}
 
		#center {
			zoom:1
		}
	</style> 
<![endif]--> 
</head>
 
<body>
  <div id="conteneur">
    <div id="contenu">
 
        <div style="height:125px" id="header">Header</div>
        <div id="center">
              <div style="float:left;height:200px">Center left</div>
              <div style="float:right">Center rigt</div>
        </div>	
    </div>
 
    <div id="footer">Footer</div>
 
  </div>
</body>
</html>

**LEK** · 27/10/2009, 22h14

Merci pour ton aide, cela répond parfaitement à mon besoin.

Probleme avec positionement footer (Solution de la FAQ)

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager