web-dev-qa-db-fra.com

100% de la largeur ne divise pas toute la largeur du navigateur dans webkit

J'ai de la difficulté avec ce que je pensais être une question simple et sans issue. 

J'essaie de créer un div qui couvre 100% de la largeur d'une fenêtre de navigateur. La div est remplie de plusieurs divs qui s’agrandissent pour remplir tout cet espace de couleurs alternées comme un terrain de football. Ces divs se développeraient pour s’adapter à toute la largeur d’un espace donné comportant des bandes individuelles de 1% remplissant totalement cet espace.

Cela semble fonctionner correctement dans Firefox, mais dans Safari (et Chrome), le calcul semble trop strict et laisse un espace supplémentaire sur la div la plus à droite.

Y a-t-il un moyen d'éviter cet espace laissé? J'ai rencontré le même problème dans Safari et Chrome, même en le plaçant dans un div de largeur fixe ... il reste toujours un espace à droite. Je me demande si je lui demande juste de faire trop de maths?

Voici le code que j'utilise, avec des versions alternatives divisant l'espace en divisions de 5% et divisions de 1%. Désolé, c'est un code long et redondant.

<html>
<head>

<style type="text/css">
<!--

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.clearfix {
    visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}    

#field {
    width: 100%;
    background: #009900;
    height: 100px;
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
}    

.singleyard {
    width: 1%;
    float: left;
    margin: 0;
    padding: 0;
    background: #009900;
}    

.fiveyards {
    width: 5%;
    float: left;
    margin: 0;
    padding: 0;
}

.alt {
    background: rgba(0,0,0,0.25);
}

.oneyard {
    width: 20%;
    float: left;
    margin: 0;
    padding: 0;
}

-->
</style>

</head>

<body>


<div id="field">
  <div class="fiveyards">5</div>
  <div class="fiveyards alt">10</div>

  <div class="fiveyards">15</div>
  <div class="fiveyards alt">20</div>

  <div class="fiveyards">25</div>
  <div class="fiveyards alt">30</div>

  <div class="fiveyards">35</div>
  <div class="fiveyards alt">40</div>

  <div class="fiveyards">45</div>
  <div class="fiveyards alt">50</div>

  <div class="fiveyards">55</div>
  <div class="fiveyards alt">60</div>

  <div class="fiveyards">65</div>
  <div class="fiveyards alt">70</div>

  <div class="fiveyards">75</div>
  <div class="fiveyards alt">80</div>

  <div class="fiveyards">85</div>
  <div class="fiveyards alt">90</div>

  <div class="fiveyards">95</div>
  <div class="fiveyards alt">100</div>

</div>


<div id="field">
<!--below section is repeated 10 times -->
<div class="singleyard">1</div>
<div class="singleyard">2</div>
<div class="singleyard">3</div>
<div class="singleyard">4</div>
<div class="singleyard">5</div>
<div class="singleyard">6</div>
<div class="singleyard">7</div>
<div class="singleyard">8</div>
<div class="singleyard">9</div>
<div class="singleyard alt">10</div>
<!--end repeated section-->

</div>    
</body>
</html>
csswebkitwidth
15
vaderules

J'ai eu le même problème, c'est ce que j'ai découvert: quelque part dans votre CSS, vous avez une autre div qui a une largeur de 100% et également un remplissage. Puisque la valeur de remplissage est ajoutée à la largeur, la valeur de cette div devient supérieure à 100%. La solution consiste à ne pas utiliser de remplissage dans les divs dont la largeur est définie à 100%. Si vous avez besoin de rembourrage, essayez d'ajouter celui-ci à l'élément à l'intérieur du div.

8
Stefanie Boyer

La seule chose à laquelle je peux penser est d'ajouter:

html, body
{
    width: 100%;
}

Juste pour être sûr que safari sait que le conteneur parent du champ est également 100%;

Une autre chose à essayer est d'ajouter:

html { overflow-y: scroll; }

Cela devrait forcer une barre de défilement latérale, même si elle est grisée. Je me demande si un rendu Webkit affiche temporairement une barre de défilement, mais ne permet pas de rendre l'espace. Une partie de ce travail?

4
ElonU Webdev

J'ai réparé le mien par

body
{
background-color:#dddddd;
width:100%;
margin:0px;
}
3
mr5

De mon expérience sur un problème similaire. Lorsque votre code ne s'étire pas complètement sur le périphérique mobile (mais le sera sur le bureau), pour le réparer, il suffit de trouver un élément qui repousse la limite de manière invisible. Il devrait y avoir un élément qui dépasse ses limites - pour moi, c’était une image de logo qui collait à environ 20 pixels de l’en-tête div. Vous pouvez trouver cela en donnant à chaque chose une frontière ou en éliminant une chose à la fois. Une fois que vous l'avez trouvé, vous pouvez le déplacer ou le supprimer afin de permettre aux choses de s'étirer à nouveau.

2
user1985646

J'ai corrigé en utilisant display: table-cell

#field {
    width: 100%;
    background: #009900;
    height: 100px;
    margin: 0;
    margin-bottom: 25px;
    padding: 0;
    display: table;
}    

.singleyard {
    width: 1%;
    margin: 0;
    padding: 0;
    background: #090;
    display: table-cell;
}

.fiveyards {
    width: 5%;
    margin: 0;
    padding: 0;
    display: table-cell;
}
2
clowwindy

J'ai corrigé le mien en ajoutant 

html, body
{
  width: 100%;
  margin: 0px;
}

bonne codage !!!

1
Chibbie

Remarqué cela n'a pas été répondu. J'avais le même problème. J'ai ajouté les lignes suivantes à ma classe CSS:

margin-right:-10px;
margin-left:-10px;
0
Thomas Pollock

l'ajout de min-width: 100% semble faire l'affaire

0
ggoren