css – 100％的宽度div不跨越webkit中浏览器的整个宽度

我有一个困难的时刻,我认为这将是一个死的简单的问题.

我正在尝试创建跨越浏览器窗口宽度的100％的div.该div充满了几个孩子的div,扩展,以填补整个空间与交替的颜色,如足球场.这些div将展开以适应给定空间的全宽,该空间具有单个1％的条纹,可以充分填充该空间.

这在Firefox中似乎工作正常,但在Safari(和Chrome)中,计算似乎太严格,并且在最右边的div上留下了一些额外的剩余空间.

有没有办法避免这个剩下的空间？即使将它放在固定宽度的div中,Safari和Chrome中也遇到了同样的问题,右边总是有空格.我想知道我是否只是要求它做太多的数学？

这是我正在使用的代码,替代版本将空格分成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.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>

解决方法

我有同样的问题,这是我发现的：你的CSS中的某个地方有另一个div宽度为100％,并且还有填充.由于填充值被添加到宽度,该div的值将大于100％.解决方案是确保不要在设置为100％宽度的任何div上使用填充.如果您需要填充,请尝试将填充添加到div内的元素.

css – 100％的宽度div不跨越webkit中浏览器的整个宽度

解决方法

相关推荐