hauteur 100% avec IE6

**flo456** · 25/07/2007, 16h11

bonjour,

je suis en train de refaire notre site internet mais voila, sous internet explorer 7, firefox, cela fonctionne très bien. par contre pas avec internet explorer 6.

la hauteur de mes pages sont à 100%.

cela doit prendre toute la hauteur de l'écran si meme si il reste du vide..

mais avec IE6, cela ne fonctionne pas, la hauteur ne prend pas toute la place.

Code :

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

1
2
3
4
5
6
7
8
9
html, body
	{
	height: 100%;
	margin: 0px;
	background-color: black;
	font-family: arial, helvetica, sans-serif;
	color: black;
	font-size:13px;
	}

ma page a un fond noir et mes pages ont un fond blanc..

quelqu'un saurait ce qu'il faut rajouter pour que cela fonctionne avec IE6?

Merci d'avance

**trotters213** · 30/07/2007, 09h44

As-tu définis un doctype à ton document HTML ?

**flo456** · 13/08/2007, 10h07

hello,

j'ai ca comme doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

merci d'avance pour ton aide.

**trotters213** · 13/08/2007, 10h20

Essai de définir la hauteur de ta page en dur mais via via Javascript : tu récupères la hauteur de l'écran via Javascript et tu définis la hauteur du body en pixel avec cette valeur.

**Candygirl** · 13/08/2007, 10h44

Hello

Envoyé par flo456

cela doit prendre toute la hauteur de l'écran si meme si il reste du vide..

mais avec IE6, cela ne fonctionne pas, la hauteur ne prend pas toute la place.

ma page a un fond noir et mes pages ont un fond blanc..

Il aurait étét intéressant que tu mettes un peu plus de css, en particulier le conteneur du blanc de tes pages. Normalement, pour un montage de ce type, tu devrais avoir attribué un min-height de 100% sur le conteneur de ton fond blanc, enfant direct du body.

Hors le min-height n'est pas interprèté par IE6-. Par contre, IE6 interprétant le height comme un min-height, il suffit de lui attribuer un height de 100% par exemple de cette manière:

Code :

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

* html #tonconteneur {height:100%;}

**flo456** · 13/08/2007, 10h50

au début de ma page css j'ai ce code :

Code :

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

1
2
3
4
5
6
7
8
9
html, body
	{
	height: 100%;
	margin: 0px;
	background-color: black;
	font-family: arial, helvetica, sans-serif;
	color: black;
	font-size:13px;
	}

donc normalement, ca doit prendre toute la hauteur de l'écran. mais non...

**Candygirl** · 13/08/2007, 10h56

C'est bon, j'ai bien lu ton css ci-dessus, j'en demandais juste un peu plus...

Tu parles de pages blanches et là c'est ton fond noir. Je te parle du css qui affiche ton blanc à l'écran et qui ne va pas jusqu'au bas sur IE6 si j'ai bien compris ton problème...

**flo456** · 13/08/2007, 11h04

j'ai fais le site tout en css.

donc j ai la patie de la banière ou je définis la hauteur. le menu idem

ensuite j ai 2 colonnes : 1 de gauche pour mon texte et 1 a droite pour mes images.

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
 
.conteneur_colones 
	{
	padding-bottom: 30px;
	overflow: auto;
	height:100%;
	}
 
.colone_gauche
	{
	float: left; 
	width: 270px;
	padding: 0px 30px 0px 30px;
	}
 
.colone_droite
	{
	float: right;
	width: 440px;
	padding: 40px 30px 0px 0px;
	}

c'est avec ca que la page s agrandit ou pas. donc il faut que je mette le 100% ici. mais ca ne fonctionne pas. (je viens d essayer)

**Candygirl** · 13/08/2007, 11h10

Bon visiblement la situation n'est pas exactement celle que j'imaginais pusique tu mets de l'overflow.

Par contre il n'y a toujours pas dans ton css l'attribution de ton fond blanc

et donc il manque encore des éléments importants pour pouvoir t'aider...

Je pense que la structure html et le css complets seraient utiles pour cerner ton problème.

**flo456** · 13/08/2007, 11h10

je viens d'essayer de mettre une couleur de fond vert à : .conteneur_colones

ca a mit la couleur dans les 2 colonnes. alors pourquoi ca ne fonctionnerait pas avec la hauteur`?

voila ma page d'acceuil :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Mimotec SA</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />		
	</head>
 
	<body>		
<div class="antibugdehauteur"> 
  <div id="conteneur_banniere"> 
    <div class="img_banniere">&nbsp;</div>
    <span><img src="css/images/dpFrancais.gif" /><img src="css/images/dpAnglais.gif" /></span> 
    <ul>
      <li> <a href="Societe/societe.html">Société</a></li>
      <li><a href="Technologie/technologie.html">Technologie</a></li>
      <li><a href="Produits/produits.html">Produits</a></li>
      <li><a href="Qualite/qualite.html">Qualité</a></li>
      <li><a href="Publication/publication.html">Publication</a></li>
      <li><a href="Contact/contact.html">Contact</a></li>
    </ul>
    <div class="img_bgmenu">&nbsp;</div>
  </div>
  <div class="conteneur_colones">    
      <p>acceuil</p>    
  </div>
  <div class="copyright"> 
    <p>&copy;Tout droits réservés à Mimotec SA</p>
  </div>
</div>
	</body>
</html>

ainsi que mon code 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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
html, body
	{
	height: 100%;
	margin: 0px;
	background-color: black;
	font-family: arial, helvetica, sans-serif;
	color: black;
	font-size:13px;
	}
 
.textesousimage
	{
	font-family: arial, helvetica, sans-serif;
	color: black;
	font-size:10px;
	}
 
A:link
	{
	text-decoration: none; 
	color: #000000; 
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
	}
 
A:visited
	{
	text-decoration: none; 
	color: #000000; 
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
	}
 
A:hover
	{
	text-decoration: underline; 
	color: #000000; 
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
	}
 
 
div.antibugdehauteur
	{
	position: relative;
	min-height: 100%;
	width: 800px;
	padding: 10px 0px 0px 0px;
	margin: 0 auto;
	background-color: #FFFFFF;
	}
 
#conteneur_banniere .img_banniere
	{
	height: 150px ;
	background:url(Images/bannermimotec.jpg) no-repeat center top;
	margin: 0px 0px 0px 0px;
	}
 
#conteneur_banniere .img_bgmenu
	{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	height:30px;
	width: 780px;
	border-width:1px 0px 0px 0px;
	border-color: #333333;
	border-style: solid;
	background-image: url("Images/bgmenu.gif");
	background-repeat: repeat-x ;
	background-position: top right;
	}
 
#conteneur_banniere span
	{
	float: right; 
	margin: 5px 20px 0px 0px;
	}
 
#conteneur_banniere span img /* fixe la largeur entre les drapeaux des langues */
	{
	padding: 0px 0px 0px 5px;
	}
 
#conteneur_banniere ul
	{
	margin: 0px 0px 0px 10px;
	padding: 5px 0px 5px 0px;
	list-style-type: none;
	font-size:14px;
	margin-left: 20;
	padding-left: 0;
	}
 
#conteneur_banniere ul li
	{
	display: inline;
	padding: 0px 15px 0px 15px;
	border-width: 0px 1px 0px 0px;
	border-color: black;
	border-style: dashed;
	}
 
#conteneur_banniere ul li a
	{
	color: black;
	text-decoration: none;
	}
 
#conteneur_banniere ul li a:hover
	{
	color: #3a5f8c;
	}
 
#active a:visited
	{
	color: #3a5f8c;
	}
 
.conteneur_colones 
	{
	/* Pour éviter la superposition 
	du pied de page et du contenu : 30px */
	padding-bottom: 30px;
	overflow: auto;
	height:100%;
	}
 
.colone_gauche
	{
	float: left; 
	width: 270px;
	padding: 0px 30px 0px 30px;
	}
 
.colone_droite
	{
	float: right; 
	width: 440px;
	padding: 40px 30px 0px 0px;
	}
 
 
h2 /*Titre*/
	{
	font-size:14px;
	border-width: 0px 0px 2px 0px;
	border-style: solid;
	border-color: black;
	}
 
div.copyright
	{
	position: absolute;
	width: 100%;
	bottom: 0px;
	margin: 0px 0px 0px 0px;
	text-align: right;
	font-size: 10px;
	}
 
div.copyright p
	{
	margin: 0px 10px 0px 0px;
	padding: 0px 0px 10px 0px;
	}
 
 
#cache {display:none}

merci d'avance

**Candygirl** · 13/08/2007, 12h30

bon ben c'est pas pour dire mais c'est exactement la situation que j'ai décrite dans mon premier message...

Code :

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

1
2
3
4
5
6
7
8
9
div.antibugdehauteur
	{
	position: relative;
	min-height: 100%;
	width: 800px;
	padding: 10px 0px 0px 0px;
	margin: 0 auto;
	background-color: #FFFFFF;
	}

C'est cet élément là qui fait venir le fond blanc jusqu'en bas sur IE7 et FF mais pas IE6 à cause du min-height. Par contre lui attribuer un padding-top de 10px n'est pas une très bonne idée puisque cela fera apparaître la scrollbarre. Donc pour règler ton problème d'origine pour le blanc qui ne vient pas jusqu'au bas sur une petite page et IE6:

Code :

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

1
2
 
* html div.antibugdehauteur {height:100%;}

**flo456** · 13/08/2007, 12h59

c'est exactement ca.

je te remercie beaucoup.

**flo456** · 13/08/2007, 13h13

bon maintenant si je mets comme cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
div.antibugdehauteur
	{
	position: relative;	
	height:100%;
	width: 800px;
	padding: 10px 0px 0px 0px;
	margin: 0 auto;
	background-color: #FFFFFF;
	}

cela ne fonctionne plus avec IE7.. il me met du noir au fond de toutes mes pages
et je ne peux pas mettre :

min-height et height..

**Candygirl** · 13/08/2007, 13h51

Tu ne dois pas enlever le min-height, tu dois juste rajouter une instruction pour que IE, et seulement IE, lui attribue un height de 100%, ce que fait le petit hack que je t'ai donné. Seul IE6- interprètera le height de 100% puisque seul lui accepte la syntax * html qui laisse supposer qu'il puisse y avoir un élément parent de l'élément racine html. Donc tu ne devais rien changer à ton code, juste ajouter la ligne que je t'ai indiquée.

Il y a bien sûr d'autres manière de faire, comme l'accadémique utilisation des commentaires conditionnels mais cela me semblait plus simple ainsi pour cette petite correction.

**flo456** · 13/08/2007, 14h11

ok j'avais pas compris l'étoile "*".

Merci pour cette info.

Cette fois c'est vraiment résolu.

Merci encore

hauteur 100% avec IE6

Dimensionnement en CSS

Discussions similaires

Partager

Partager