Bonjour,

J'espère que je poste dans le bon forum.

Je souhaite que mon footer reste toujours en bas de page. Tout fonctionne parfaitement sur IE 6, IE 7, IE 8, Firefox, Chrome, Safari...

Seulement, je souhaite rentre ma page un peu plus "dynamique".
Voici un schema :



et le site test.

Comme on peut le voir, dès qu'on clique sur le bloc noir, il s'agrandit en hauteur. Le footer reste reste toujours en bas de page sauf sur IE 6.

Chose étrange car, si je fixe manuellement le taille du bloc noir avec une hauteur de 2000px par exemple, le footer reste toujours en bas de page.

Comme si IE 6, ne recalculait pas la page en direct :/

Voici le code html :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<div id="global">
	<div id="corps">
 
		<div id="carre"></div>
	</div>
	<div id="footer"></div>
</div>
Et le css associé :
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
* { margin:0; padding:0; }
 
html {	
	height:100%;
}
 
body {
	height:100%;	
}
 
 
#global {
	position: relative;
    min-height: 100%;
}
 
html>body #global {
    height: auto;
}
 
#corps {
	width:975px;
	padding:0 0 60px 0;
	overflow:auto;
	clear:both;
	background-color:#CCC;
}
 
#carre {
	width:500px; height:100px; background-color:#333;
}
 
#footer {
	position:absolute;
	bottom:0;
	height:45px;
	background-color:#0F0;
	width:100%;
}
Avez-vous des idées ?


Merci d'avance.