100% width divs not spanning entire width of the browser in webkit

问题

I'm having a hard time with what I thought would be a dead simple issue.

I'm trying to create a div that spans 100% of the width of a browser window. The div is filled with several child divs that expand to fill that entire space with alternating colors like a football field. These divs would expand to fit the full width of a given space that has individual 1% stripes that fill that space fully.

This seems to work fine in Firefox, but in Safari (and Chrome) the calculation seems to be too strict, and leaves some extra leftover space on the right-most div.

Is there any way to avoid this leftover space? I've encountered the same issue in Safari and Chrome even when placing it in a fixed width div... there is always space left over on the right. I wonder if I'm just asking it to do too much math?

Here is the code I am using, with alternate versions dividing the space into divisions of 5% and divisions of 1%. Sorry, it's long and redundant 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>

回答1:

I had the same problem, this is what I discovered: somewhere in your CSS you have another div that has a width of 100% and ALSO has padding. Since the padding value is added to the width, the value of that div becomes greater than 100%. The solution is to make sure not to use padding on any div that is set to 100% width. If you need padding, try adding the padding to the element inside the div instead.

回答2:

Only thing I can think of is to add:

html, body
{
    width: 100%;
}

Just to make sure safari knows the parent container of field is also 100%;

Another thing to try is to add:

html { overflow-y: scroll; }

That should force a side scrollbar, even if it's grayed out. I wonder if some webkit rendering temporarily flashes a scrollbar, but fails to give the space back. Any of that work?

回答3:

I have fixed mine by

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

回答4:

I fixed by using 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;
}

回答5:

From my experience on a similar issue. When your code will not stretch the entire way on the mobile device (but will on the desktop), fixing it is a matter of finding some element that is pushing the boundary invisibly. There should be some item that is breaking out of its boundary - for me it was a logo image that was sticking about 20px outside the header div. You can find this by giving everything a border or by eliminating one thing at a time. Once you have found it, you can move it or remove it in order to allow things to stretch the full way again.

回答6:

I have fixed mine by adding

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

happy coding!!!

回答7:

Noticed this wasn't answered. I was having the same issue. I added the following lines to my CSS class:

margin-right:-10px;
margin-left:-10px;

回答8:

adding min-width: 100% seems to do the trick

来源：https://stackoverflow.com/questions/6659359/100-width-divs-not-spanning-entire-width-of-the-browser-in-webkit

标签

css

webkit

width