100% largeur divs ne couvrant pas toute la largeur du navigateur dans webkit

Je vais avoir un moment difficile avec ce que je pensais serait un simple morts problème.

Je suis en train de créer une div qui s'étend sur 100% de la largeur de la fenêtre du navigateur. La div est rempli avec plusieurs enfants divs qui se développe pour remplir tout l'espace avec une alternance de couleurs comme un terrain de football. Ces divs serait élargi pour s'adapter à la largeur d'un espace donné, qui a l'individu 1% bandes qui remplissent cet espace entièrement.

Cela semble bien fonctionner dans Firefox, mais dans Safari (et Chrome) le calcul semble être trop stricte, et les feuilles de certains des restes supplémentaire de l'espace sur le bouton droit de la plupart des div.

Est-il un moyen pour éviter cela, les restes de l'espace? J'ai rencontré le même problème dans Safari et Chrome, même lorsque vous le placez dans une largeur fixe div... il y a toujours de l'espace à gauche sur le droit. Je me demande si je vais juste lui demander de faire trop de calcul?

Ici c'est le code que j'utilise, avec d'autres versions de diviser l'espace en divisions de 5% et les divisions de 1%. Désolé, c'est long et redondant code.

<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>

source d'informationauteur vaderules

  1. 8

    J'ai eu le même problème, c'est ce que j'ai découvert: quelque part dans votre CSS, vous avez un autre div qui a une largeur de 100% et dispose ÉGALEMENT d'un rembourrage. Depuis le rembourrage de la valeur est ajoutée à la largeur, la valeur de la div devient supérieure à 100%. La solution est de faire en sorte de ne pas utiliser de rembourrage sur toute div qui est fixée à 100% de largeur. Si vous avez besoin de rembourrage, essayez d'ajouter le remplissage de l'élément à l'intérieur de la div à la place.

  2. 4

    Seule chose que je peux penser est d'ajouter:

    html, body
{
width: 100%;
}

    Juste pour s'assurer que safari sait le conteneur parent de champ est également de 100%;

    Une autre chose à essayer est d'ajouter:

    html { overflow-y: scroll; }

    Qui devrait forcer un côté de la barre de défilement, même si c'est grisé. Je me demande si certains de rendu webkit temporairement clignote une barre de défilement, mais ne parvient pas à donner de l'espace à l'arrière. Tout ce travail?

  3. 2

    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;
}
  4. 2

    J'ai réparé le mien par

    body
{
background-color:#dddddd;
width:100%;
margin:0px;
}
  5. 2

    De mon expérience sur un problème similaire. Lorsque votre code ne sera pas étirer tout le chemin sur le périphérique mobile (mais sur le bureau), c'est la fixation est une question de trouver un élément qui repousse les limites de manière invisible. Il doit y avoir un élément qui est sortir de ses limites - pour moi, c'était une image de logo qui a été coller à propos de 20px à l'extérieur de l'en-tête div. Vous pouvez le trouver en donnant tout ce qu'une frontière ou en éliminant une chose à la fois. Une fois que vous avez trouvé, vous pouvez le déplacer ou le supprimer afin de permettre aux choses de se étirer la façon complète à nouveau.

  6. 1

    J'ai réparé le mien en ajoutant 

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

    codage heureux!!!

  7. 0

    Remarqué que ce n'était pas la réponse. J'ai eu le même problème. J'ai ajouté les lignes suivantes à ma classe CSS:

    margin-right:-10px;
margin-left:-10px;
  8. 0

    ajoutant min-width: 100% semble faire l'affaire