style Overflow:auto IE vs FireFox?

**DrazQueb** · 26/11/2006, 22h13

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 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
 
<html> 
<body> 
<table height=100% width=100%> 
<tr> 
<td colspan="2"> Header </td> 
</tr> 
<tr> 
<td width=20%>Menu 
<br> <div style='overflow:auto; width:100%; 
height:90%;' > 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 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

**trotters213** · 27/11/2006, 09h11

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
<!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 ?

**DrazQueb** · 27/11/2006, 14h35

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 ?

**trotters213** · 27/11/2006, 14h56

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.

**DrazQueb** · 27/11/2006, 15h28

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 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
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

**trotters213** · 27/11/2006, 16h18

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...

Normal tu définis 100% de hauteur à ton body mais 100% de quoi

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).

style Overflow:auto IE vs FireFox?

CSS

Vue hybride

Discussions similaires

Partager

Partager