web-dev-qa-db-ja.com

100％幅のdivがWebkitのブラウザーの幅全体に及んでいない

単純な問題だと思っていたので苦労しています。

ブラウザウィンドウの幅の100％に及ぶdivを作成しようとしています。 divにはいくつかの子divがあり、フットボールのフィールドのように、そのスペース全体が交互の色で塗りつぶされます。これらのdivは、そのスペースを完全に埋める1％のストライプが個別にある特定のスペースの全幅に合わせて拡張されます。

これはFirefoxでは問題なく動作するようですが、Safari（およびChrome）では計算が厳しすぎるようで、右端のdivに余分なスペースが残っています。

この余ったスペースを避ける方法はありますか？ Safariで同じ問題が発生し、Chromeを固定幅のdivに配置した場合でも...右側にスペースが常に残っています。それはあまりにも多くの数学を行うには？

これは私が使用しているコードで、別のバージョンではスペースを5％の分割と1％の分割に分割しています。すみません、長く冗長なコードです。

<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

私は同じ問題を抱えていましたが、これは私が発見したものです：CSSのどこかに、幅が100％の別のdivがあり、ALSOにもパディングがあります。パディング値が幅に追加されるため、そのdivの値は100％より大きくなります。解決策は、100％幅に設定されているdivでパディングを使用しないようにすることです。パディングが必要な場合は、代わりにdiv内の要素にパディングを追加してみてください。

8
Stefanie Boyer

私が考えることができる唯一のものは追加することです：

html, body
{
    width: 100%;
}

Safariがフィールドの親コンテナも100％であることを確認するためだけです。

もう1つ試すことは、追加することです。

html { overflow-y: scroll; }

灰色になっている場合でも、サイドスクロールバーが強制されます。一部のWebkitレンダリングが一時的にスクロールバーを点滅させますが、スペースを戻すことができないのではないでしょうか。その仕事のいずれか？

4
ElonU Webdev

私は私のことを修正しました

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

同様の問題に関する私の経験から。コードがモバイルデバイスで完全に拡大されない（デスクトップで拡大される）場合、修正は、目に見えない境界を押している要素を見つけることの問題です。境界を超えているアイテムがあるはずです。私にとっては、ヘッダーdivの外側に約20px付いているロゴ画像でした。これは、すべてに境界線を付けるか、一度に1つを削除することで確認できます。見つけたら、移動したり削除したりして、もう一度完全に伸ばすことができます。

2
user1985646

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

追加して私の問題を修正しました

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

ハッピーコーディング!!!

1
Chibbie

これが答えられなかったことに気づきました。私は同じ問題を抱えていました。 CSSクラスに次の行を追加しました。

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

追加min-width: 100%トリックをするようです

0
ggoren