Balise fixe sur IPad

**AIDExpress** · 18/05/2015, 23h16

Bonjour,
J'épluche les recherches, forum, des tests,... mais sans succès.
Excusez moi à l’avance si une réponse à été donné à un problème similaire mais je ne l'ai pas trouvé.

J'ai donc une page HTML toute bête avec une DIV fixe en haut de ma page et un tableau qui défile.
Tout se passe bien sur PC ou sur mon WindowsPhone mais sur un IPad ma DIV n'est pas fixe.

Voila mon code 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
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
<!DOCTYPE html>
<html  lang="FR">
 
<head>    
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <meta name="viewport" content="width=device-width, user-scalable=no">
 
    <title>Test Fixe</title>
 
    <link rel="stylesheet" href="css/style.css" type="text/css" />
 
</head>
 
<body>
 
	<div id="divfixe">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><a href="index.php">retout</a></td>
            <td>&nbsp;</td>
            <td><a href="export.php">Export</a></td>
            <td>&nbsp;</td>
            <td><a href="export2.php">Export 2</a></td>
          </tr>
        </table>
    </div>		
 
    <div id="divscroll">
        <table width="100%" border="1" cellpadding="1" cellspacing="1">
          <tr>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="8%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="8%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="15%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="12%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="12%" ><strong>xxxxxxxxxxxxxxx</strong></td>
          </tr>
          <tr>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="8%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="8%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="15%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="12%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="12%" ><strong>xxxxxxxxxxxxxxx</strong></td>
          </tr>
......
          <tr>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="8%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="8%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="15%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="12%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="10%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="5%" ><strong>xxxxxxxxxxxxxxx</strong></td>
            <td align="center" width="12%" ><strong>xxxxxxxxxxxxxxx</strong></td>
          </tr>
      </table>
</div>
 
</body>
 
</html>

Et le 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
 
#divfixe{
	position:fixed; 
	margin-top:-10px; 
	background-color:#CCC;
	width: 100%;
	height:30px; 
	z-index:10;
}
 
#divscroll {
	position: absolute;
	margin-top: 20px;
	width: 100%;
	-webkit-overflow-scrolling:touch;
}

Comme vous pouvez le voir dans les codes j'ai essayer en rajoutant la balise META <meta name="viewport" content="width=device-width, user-scalable=no"> dans le HTML et/ou -webkit-overflow-scrolling:touch; dans le CSS pour la balise faisant le scroll par raport a ce que j'ai pu lire (sans forcément tout comprendre car je suis pas un expert du css) mais sans résultat.

Merci de votre aide

**AIDExpress** · 18/05/2015, 23h28

Heuu,

Ben en fait ca marche maintenant.
J'avais du avoir une meta en double ou je sais pas quoi, mais en faisant ce message et un code propre, maintenant ca fonctionne

Désolé du dérangement ^^

Balise fixe sur IPad

CSS

Discussions similaires

Partager

Partager