Discussion :

[vnk600]

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.

[Candygirl]

Hello,

IE6 ne sait pas interpréter le min-height. Par contre le height se comporte comme tel.

Au vu de ton code (recopié quelque part ?) il était prévu de gérer le cas IE6, comme en témoigne cette partie ci:

Code :

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

1
2
3
4
 
html>body #global {
    height: auto;
}

Ce bout de code est censé remettre tous les navigateurs à une hauteur auto pour le #global quand on a spécifié précédemment une hauteur de 100% à l'attention de IE6 (IE6 n'interprétant pas le sélecteur > cette instruction ne sera pas exécutée sur ce dernier).

Donc, en principe, il manque dans ton code juste au dessus un height de 100% à l'attention de IE6 pour le faire fonctionner:

Code :

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

1
2
3
4
5
6
7
 
#global {
    position: relative;
    min-height: 100%;
    height:100%
}
}

Il serait cependant plus propre de spécifier le height de 100% pour IE6- seulement, à l'aide d'un commentaire conditionnel.

[vnk600]

J'ai ajouté cette instruction, cela ne change rien.
Comme dit dans mon poste, mon code fonctionne sur IE 6, le footer est bien en bas de page sauf quand j'utilise javascript pour augmenter la taille du carré noir.

Dès que je clique sur celui-ci, sa hauteur augmente mais le footer reste en même position sur IE6.

En revanche, si je spécifie manuellement la hauteur du carré noir (une très grande hauteur et sans javascript) cela fonctionne.

IE 6 ne semble pas recalculer la position du footer :/

[Candygirl]

oups oui toute mes excuses je n'ai pas pris le temps de regarder la page de test (en faite je n'ai pas IE6 sur cette machine -_-)

[Candygirl]

En déplaçant le footer avant le corps dans le html il me semble que cela fonctionne alors (sur IE tester) ?

Code html :

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

1
2
3
4
5
6
<div id="global">
	<div id="footer"></div>
	<div id="corps">
		<div id="carre"></div>
	</div>
</div>

C'est juste une piste, pas forcément la solution à adopter mais je n'ai pas le temps de regarder plus loin