100% 宽度的 div 不跨越 webkit 中浏览器的整个宽度答案

【问题标题】：100% width divs not spanning entire width of the browser in webkit100% 宽度的 div 不跨越 webkit 中浏览器的整个宽度
【发布时间】：2011-10-03 07:32:19
【问题描述】：

我很难解决我认为很简单的问题。

我正在尝试创建一个跨越浏览器窗口宽度 100% 的 div。该 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,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样式都被注释掉了？
哈。不知道为什么那些评论标签在那里，但感谢您的关注。不幸的是，删除它们并没有帮助。
你开发的最终状态是什么。你找到答案了吗。我也面临着类似的问题。（参考：stackoverflow.com/questions/17089419/…）

标签： css webkit width

【解决方案1】：

根据我在类似问题上的经验。当您的代码不会在移动设备上完全延伸（但会在桌面上）时，修复它的问题是找到一些无形地推动边界的元素。应该有一些项目超出了它的边界——对我来说，它是一个标志图像，它在标题 div 之外大约 20 像素。你可以通过给所有东西一个边界或一次消除一件事来找到这一点。找到它后，您可以移动或移除它，以便让物体再次完全伸展。

【讨论】：

【解决方案2】：

我遇到了同样的问题，这就是我发现的：在您的 CSS 中的某处，您有另一个宽度为 100% 的 div 并且也有填充。由于将填充值添加到宽度，该 div 的值变得大于 100%。解决方案是确保不在任何设置为 100% 宽度的 div 上使用填充。如果您需要填充，请尝试将填充添加到 div 内的元素。

【讨论】：

宾果游戏！同样，body { margin: 0; } 可能允许元素在某些旧浏览器（Android 4.1）中真正成为真正的width: 100%;。替代方法可能是给intervening divsposition: relative;

【解决方案3】：

我已经修好了

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

【讨论】：

【解决方案4】：

添加 min-width: 100% 似乎可以解决问题

【讨论】：

【解决方案5】：

注意到这没有回答。我遇到了同样的问题。我在我的 CSS 类中添加了以下几行：

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

【讨论】：

【解决方案6】：

我使用 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;
}

【讨论】：

【解决方案7】：

我已经通过添加修复了我的

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

编码愉快！！！

【讨论】：

【解决方案8】：

我唯一能想到的就是添加：

html, body
{
    width: 100%;
}

只是为了确保 safari 知道字段的父容器也是 100%；

要尝试的另一件事是添加：

html { overflow-y: scroll; }

这应该强制一个侧滚动条，即使它是灰色的。我想知道是否某些 webkit 渲染会暂时闪烁滚动条，但未能将空间归还。任何工作？

【讨论】：

感谢您的建议，不幸的是问题仍然存在。我想我已经将它缩小到 Safari 和 Chrome 将基于百分比的宽度四舍五入到百分比的 1/2（并且没有更多），这会导致剩余空间，除非总宽度是“像素完美”。也许我可以想出一种方法来欺骗浏览器正确计算它，但目前我仍然无法解决这个问题。