Espace blanc entre le background et bas de la page

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

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, 17h41

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

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

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, 18h16

Et ton code HTML (simplifié) ?

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

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, 11h15

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.

Espace blanc entre le background et bas de la page

CSS

Vue hybride

Discussions similaires

Partager

Partager