style Overflow:auto IE vs FireFox?

Version imprimable

Bonjour à vous,
J'ai une page standard avec une entête, un menu a gauche, un contenu et un bas de page. Mon menu contient trop d'éléments pour pouvoir l'afficher en entier et requière une scrollbar.
Voici mon Html
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <body> <table height=100% width=100%> <tr> <td colspan="2"> Header </td> </tr> <tr> <td width=20%>Menu <div style='overflow:auto; width:100%; height:90%;' > MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem MenuItem </div> </td> <td align=center width=80%> Contenu </td> </tr> <tr> <td colspan="2"> Footer </td> </tr> </table> <body> </html>
Dans Internet Explorer tout fonctionne très bien, cependant dans FireFox, la page dépasse le height de 100%. Il doit y avoir un autre élément à spécifier?

J'aprécierais beaucoup votre aide
Merci
Martin

:salut:

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
 
<body>
<div style="overflow:auto; width:100%; height:500px;" >
<table style="height:100%; width:97%; "> 
<tr> 
	<td colspan="2"> Header </td> 
</tr> 
<tr> 
<td style="width:20%;">Menu 
<br />  MenuItem <br /> MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem 
<br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br /> 
MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br /> 
MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />
MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br /> 
MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br /> </td> 
<td style="width:20%; text-align:center;"> Contenu </td> 
</tr> 
 
<tr> 
<td colspan="2"> Footer </td> 
</tr> 
</table>
</div>
</body>
</html>

C'est cela que tu cherches ?

27/11/2006, 14h35
DrazQueb

Oui en Pourcentage

Oui c'est ce que je cherche mais est-il possible de remplacer dans le div la hauteur ( height:500px;) par un pourcentage pour permettre un dimensionnement de fenêtre ?
27/11/2006, 14h56
trotters213

Oui c'est possible mais elle va prendre une taille en pourcentage par rapport à son conteneur (le body). Si tu ne définis la hauteur du body, IE prend la hauteur de la page mais pas firefox donc il faut à ce moment là que tu définisses une hauteur au body.

Encore des problèmes

Merci beaucoup pour tes réponses, j'ai malheureusement encore un problème. J'ai défini une hauteur de 100% a mon body mais comme d'habitude, Ie comprend et Firefox n'écoute pas...
Voici mon HTML :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
 
<body  style="height:90%;margin:auto;" >
 
<table style="height:100%; width:97%; "> 
<tr> 
	<td style="height:20%;" colspan="2"> 
	Header 
	</td> 
</tr> 
<tr> 
<td style="height:50%;width:20%;">
Menu 
<div style="overflow:auto; width:100%; height:100% " >
<br />  MenuItem <br /> MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem 
<br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br /> 
MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br /> 
MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />
MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br /> 
MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br />MenuItem <br /> 
</div>
</td> 
<td style="width:20%; text-align:center;"> Contenu </td> 
</tr> 
 
<tr> 
<td  style="height:30%;" colspan="2"> Footer </td> 
</tr> 
</table>
 
</body>
</html>

Je suis obligé de faire une page avec des hauteurs fixes pour firefox ou je suis seulement malchanceux?

Merci bien
Martin

27/11/2006, 16h18
trotters213

Citation:

Envoyé par DrazQueb

Merci beaucoup pour tes réponses, j'ai malheureusement encore un problème. J'ai défini une hauteur de 100% a mon body mais comme d'habitude, Ie comprend et Firefox n'écoute pas...

:mrgreen:
Normal tu définis 100% de hauteur à ton body mais 100% de quoi :mrgreen:
Là tu n'as fais que répercuter le problème.
Soit tu donnes une taille fixe à ton body soit tu peux détecter la taille de la fenêtre avec Javascript (je te laisse chercher sur ce sujet, il y a des sujets sur le Net à foison).