100％width divs不跨webkit的浏览器的整个宽度 [英] 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.
我试图创建一个跨越浏览器窗口宽度100％的div。 div填充了几个孩子div，扩展，以填充整个空间交替的颜色，如足球场。这些div将扩展到适合具有单独1％条纹的给定空间的整个宽度，以完全填充该空间。
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.
这似乎在Firefox中工作正常，但在Safari（和Chrome）的计算似乎太严格，并在最右边的div上留下一些额外的剩余空间。
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.
有任何方法可以避免这个剩余空间？我遇到过同样的问题在Safari和Chrome，即使把它放在一个固定的宽度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?
这里是我使用的代码，替换版本将空格划分为5％分割为1％。很抱歉，这是冗长冗长的代码。
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>
推荐答案
我有同样的问题， ：在你的CSS中有一个宽度为100％的另一个div和ALSO有填充。由于填充值与宽度相加，该div的值大于100％。解决方案是确保不要在设置为100％宽度的任何div上使用填充。如果您需要填充，请尝试将填充添加到div中的元素。
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.
这篇关于100％width divs不跨webkit的浏览器的整个宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
