Div pere fixe et scroll sur div fils [Résolu]

[mowegan]

Bonjour à tous,

Je suis actuellement en train de réaliser une version d'un site web pour mobile (iPhone et iPad particulierement) avec l'API Google Maps mais je rencontre actuellement des problèmes sur la hauteur de certaines balises.

Je vous donnes mon code puis vous expliques mon problème.

Code HTML minimisé:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div>
        <div id="map_canvas"></div>
        <div id="options">
                <div id='head_menu'>
                        <div id='title_menu'>Menu</div>
                        <div id='close_menu'></div>
                </div>
                <div id='container_runners_table'>
                      <table id='runners_table'>
                            <tr class='table_header'><th><input type='checkbox' /></th><th><input type='checkbox' /></th><th>Nom</th><th>Icones</th></tr>
                           <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Titi</td><td>#</td></tr>
                           <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Toto</td><td>#</td></tr>
                          <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Riri</td><td>#</td></tr>
                          <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Fifi</td><td>#</td></tr>
                          <tr><td><input type='checkbox' /></td><td><input type='checkbox' /></td><td>Joe</td><td>#</td></tr>
                     </table>
               </div>
        </div>
</div>

Code CSS minimisé

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
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
 
#options{
     position:absolute;
     top:35px;
     left:25%;
     background-color:#FFFFFF;
     width:50%;
     z-index:999;
}
 
#head_menu
{
    background-color:#5380D4; 
    height:30px; 
    color:#FFFFFF;
    font-family:"Tahoma";
    font-size:12px;
    text-align:center;
    font-weight:bolder;
}
 
#title_menu
{
    float:left;
    height:20px;
    margin-top:5px;
    margin-left:30px;
    text-align:right;
}
 
#close_menu
{
    height:20px;
    width:20px;
    float:right;
    background-image:url("../images/close_cross.png");
    margin-right:5px;
    margin-top:5px;
}
 
 
#container_runners_table
{
    border:none;
}
 
#runners_table
{
    text-align:center;
    border-collapse:collapse;
    width:100%;
    font-size:10px;
    font-family:"Tahoma";
    border:1px solid #3A3A3A;
}
 
#runners_table th
{
    border: 1px solid #3A3A3A;
    padding-top : 2px;
    padding-bottom : 2px;
}
 
#runners_table td
{
    padding-top:2px;
    padding-bottom:2px;
}

Avec ce code ma div #options vient se placer au centre de ma page avec 50% de largeur (pas de soucis).
Le probleme vient de la hauteur.
J'aimerai que ma fenêtre #options fasse 80% de haut (donc ne depasse pas du cadre qui est la carte Google Maps et que ce soit la div #container_runners_table qui prenne une scrollbar lorsque je commence a avoir beaucoup de ligne dans mon tableau.

Actuellement ma div dépasse de la carte ce qui n'est vraiment pas terrible

J'espere que c'est comprehensible ce que je raconte.

Merci d'avance pour vos réponses qui me seront vraiment très utile.

[ornitho13]

Salut,

dans ta css rajoute ceci :

Code css :

1
2
3
4
5
6
7
8
9
10
#options{
     position:absolute;
     top:35px;
     left:25%;
     background-color:#FFFFFF;
     width:50%;
     z-index:999;
     height:80%;
}

et ceci :

Code css :

1
2
3
4
5
6
7
#container_runners_table
{
    border:none;
    height:100%;
    overflow:scroll;
}

ça devrait le faire

[mowegan]

Merci bien ornitho13 c'est exactement ce qui me fallait mais je remplace scroll par auto.