un div qui s'ajuste automatiquement a la hauteur

**NoobX** · 08/11/2006, 17h09

Bonjour @ tous !
J'ai un souci d'affichage entre Firefox2 et IE !
Avec IE tous va bien mais pas avec Firefox2

voici mon code :

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
41
<html>
<head>
</head>
 
<body scroll="no" topmargin="0" rightmargin="0" leftmargin="0" padding="0" bottommargin="0">
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td  height="30">cette ligne du tableau a une hauteur fixe de 30 pixel</td>
  </tr>
  <tr>
    <td>
<div id="layer1" style="position:relative; height:100%; width:100%; overflow: auto;"> 
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>1</p>
        <p>l</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>fin</p>
        <p>&nbsp;</p>
        <p>&nbsp; </p>
      </div>
</td>
  </tr>
</table>
</body>
</html>

pour résumer j'ai un tableau avec 2 ligne et une seul colonne (pour l'exemple)
Le tableau a des dimensions en % (100%)
La premiere ligne de mon tableau a une hauteur fixe de 30px!
La 2eme ligne du tableau se dimensionne en fonction de l'affichage
Celle ci contient un div qui doit se dimensionner en fonction de l'affichage et permettre ainsi de faire defiler le contenu du div si besoin!
sous IE pas de probleme mais sous firefox impossible d'obtenir le meme resultat

Pour bien comprendre, tester mon script sous IE vous verrez le resultat que je veux obtenir!
Puis testez sous firefox et vous comprendrez pleinement mon probleme

Merci d'avance

**Bisûnûrs** · 08/11/2006, 17h16

Oui ? Et ? Tu veux faire quoi concrètement ?

Au passage, remplace :

Code HTML :

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

<body scroll="no" topmargin="0" rightmargin="0" leftmargin="0" padding="0" bottommargin="0">

par :

Code HTML :

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

<body style="overflow:hidden;margin:0;padding:0">

Si tu veux juste faire un div fixe, va faire un tour dans la FAQ CSS.

**NoobX** · 08/11/2006, 17h27

l'objectif est d'obtenir un scroll qui se met automatiquement a la bonne dimension sous firefox comme le fait IE.

bon j e reprend mes explication a zero :

ALors j'ai un tableau de 100% de haut et de large !
il se compose en 3 ligne uniquement !
La hauteur de la premiere ligne est de 40px
La hauteur de la 3eme ligne est aussi de 40px
La hauteur de la ligne de milieu n'est pas preciser puisqu'elle est censée s'adapter a la dimension de l'ecran moibns les lignes 1 et 3 !
donc ca nous donne :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<table width="100%" height="100%" border="1">
  <tr>
    <td height="40">ligne 1 auteur defini de 40px</td>
  </tr>
  <tr>
    <td>
ligne 2 auteur indefini
    </td>
  </tr>
  <tr>
    <td height="40">ligne 3 auteur defini de 40px</td>
  </tr>
</table>

Jusque là pas de probleme

Maintenant la ligne 2 contient beaucoup de texte (par exemple) avec beaucoup de retour a la ligne !

Afin de ne pas augmenter le hauteur de mon tableau, audela de la taille de l'ecran, je dois donc rendre 'scrollable' la 2eme ligne de mon tableau !

J'y ajoute donc une balise "div" contnant tous mon texte :

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
<table width="100%" height="100%" border="1">
  <tr>
    <td height="40">ligne 1 auteur defini de 40px</td>
  </tr>
  <tr>
    <td>
<div id="layer1" style="position:relative; height:100%; width:100%; overflow: auto;"> 
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>1</p>
        <p>l</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>fin</p>
        <p>&nbsp;</p>
        <p>&nbsp; </p>
      </div>
 
    </td>
  </tr>
  <tr>
    <td height="40">ligne 3 auteur defini de 40px</td>
  </tr>
</table>

Ainsi j'espere obtenir un tableau qui rempli tous l'écran et dont la 2eme ligne est scrollable afin de faire defiler tous le contenu de la balise div qui est de 100% puisque je ne connais pas ca taille en pixel!

cela fonctionne sous IE et pas sous Firefox2 !

Sous firefox c'est toute la page qui est scrollable alors que je ne veux cscroller que la 2eme ligne de mon tableau

**NoobX** · 14/11/2006, 13h01

bon depuis la derniere fois j'ai pas mal avancé !
recapitulatif :
J'ai utliser les conseils de bisunurs afin de revoir mon script !!!
ce qui m'a donné pas mal de probleme puisque je sus partie d'un script qui fonctionnait que sous IE pour me retrouver avec un script qui ne fonctionnait que sous FIrefox 2

(la galeeeere)!

aprs plusieurs recherche je suis arrivé a quelque chose qui fonctionne sous Ie et Firefox mais c'est pas tres propres

voici mon script actuel :

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
<head></head>
<body style="overflow:hidden;margin:0;padding:0">
<table width="100%" height="100%" border="1">
  <tr>
    <td height="40">ligne 1 auteur defini de 40px</td>
  </tr>
  <tr>
    <td>
	<!--[if IE]>
<div id="layer1" style="position:fixed; 
top:40px; 
bottom:40px; 
height:100%;
width:100%;
overflow-Y: auto;
background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> 
<![endif]-->
<div id="layer1" style="position:fixed; 
top:42px; 
bottom:42px;
left:3;
right:2; 
height:auto;
width:auto;
overflow-Y: auto;
background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> 
 
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>1</p>
        <p>l</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>f</p>
        <p>fin</p>
        <p>&nbsp;</p>
        <p>&nbsp; </p>
      </div>
 
    </td>
  </tr>
  <tr>
    <td height="40">ligne 3 auteur defini de 40px</td>
  </tr>
</table>
</body>

Je me suis trouvé obligé d'utilisé une balise "if IE" pour réglé le probleme de height et width auto ou 100% selon le navigateur !

si vous voyez comment ameliorer ce script faite moi signe

un div qui s'ajuste automatiquement a la hauteur

Dimensionnement en CSS

Discussions similaires

Partager

Partager