Espace blanc entre le background et bas de la page

**fouliou23** · 12/08/2014, 16h34

Bonjour,

Actuellement je suis en plein développement d'un site internet qui servira de tableau de bord d'affichage du nombre d’utilisateur d'une application en temps réel, en gros le site web ne contiendra qu'une seul page qui est censé occupé la totalité de l'écran ( PC, Tablette, Smartphone...).

/!\ Le problème: /!\

Sur les écrans d'ordinateur le site web occupe tout l’espace de l'écran (ca marche niquel), par contre sur les smartphones et les tablettes un espace blanc (qui varie selon la taille des écrans) vient s'incruster entre le background et le bas de la page.

Merci de votre aide.

**Bisûnûrs** · 12/08/2014, 16h41

Je pense (et je peux l'affirmer sans avoir peur de me tromper) que ça doit venir de ton code.

**fouliou23** · 12/08/2014, 17h13

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
body {
					width: 98.5%;
                    margin:0;
                    padding:0;
                    background: url(EcranTransitionChalTV_5_2.jpg) no-repeat center fixed; 
                    -webkit-background-size: cover; /* pour Chrome et Safari */
                    -moz-background-size: cover; /* pour Firefox */
                    -o-background-size: cover; /* pour Opera */
                    background-size: cover; /* version standardisée */
		              }
 
                .Degrade{
                    width: 85%;
                    background: url("background_19_2.png");
                    margin-left : auto;
                    margin-right: auto;
                    -webkit-background-size: cover; /* pour Chrome et Safari */
                    -moz-background-size: cover; /* pour Firefox */
                    -o-background-size: cover; /* pour Opera */
                    background-size: cover; /* version standardisée */
                    border: 2px inset black;
                    -moz-box-shadow:  10px 10px 5px px #656565;
                    -webkit-box-shadow:  10px 10px 5px px #656565;
                    -o-box-shadow:  10px 10px 5px px #656565;
                    box-shadow:  10px 10px 5px px #656565;
                    filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
                    -moz-border-radius: 20px;
                    -webkit-border-radius: 20px;
                    border-radius: 20px;
                    background-clip:padding-box;
                }

**Bisûnûrs** · 12/08/2014, 17h16

Et ton code HTML (simplifié) ?

**fouliou23** · 13/08/2014, 08h55

Mon code html simplifié:

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
 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>...</title>
 
<script type ="text/javascript>...</script>
</head>
 
<body>
<div class="Degrade">
<img src...>
 
<h1>...</h1>
...
...
<div class ="footer">
 <img src...>
</div>
 
</body>
</html>

**Bisûnûrs** · 13/08/2014, 10h15

Ce n'est pas quand le contenu est supérieur à la taille de la zone de visualisation ? Sur un PC, ton background fixed fonctionne, mais pas sur les mobiles ce qui fait que ton fond défile et laisse apparaitre du blanc.

**fouliou23** · 13/08/2014, 10h33

et donc pour y remédier il faut ....??

**Bisûnûrs** · 13/08/2014, 10h45

Rechercher sur Google :
http://lmgtfy.com/?q=background+fixed+mobile

Et tomber sur ce genre de lien :
http://catch404.net/2012/12/fixed-ba...bile-browsers/

Par exemple.

Espace blanc entre le background et bas de la page

CSS

Discussions similaires

Partager

Partager