我很难解决我认为非常简单的问题。
我正在尝试创建一个占浏览器窗口宽度 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>
最佳答案
我遇到了同样的问题，这是我发现的:在您的 CSS 中的某处，您有另一个宽度为 100% 并且还具有填充的 div。由于 padding 值添加到宽度，该 div 的值变得大于 100%。解决方案是确保不要在任何设置为 100% 宽度的 div 上使用填充。如果您需要填充，请尝试将填充添加到 div 内的元素。
关于css - 100% 宽度 div 不跨越 webkit 中浏览器的整个宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6659359/