CSS 100% 宽度的 div 没有跨越 webkit 中浏览器的整个宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6659359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
100% width divs not spanning entire width of the browser in webkit
提问by vaderules
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.
我正在尝试创建一个跨越浏览器窗口宽度的 100% 的 div。该 div 充满了几个子 div，这些子 div 扩展以像足球场一样用交替的颜色填充整个空间。这些 div 将扩展以适应给定空间的整个宽度，该空间具有完全填充该空间的单独 1% 条纹。
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.
这在 Firefox 中似乎运行良好，但在 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?
有没有办法避免这个剩余空间？我在 Safari 和 Chrome 中遇到了同样的问题，即使将它放置在固定宽度的 div 中......右边总是有剩余空间。我想知道我是否只是要求它做太多的数学运算？
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.
这是我正在使用的代码，替代版本将空间划分为 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>
回答by Stefanie Boyer
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.
我遇到了同样的问题，这就是我发现的：在你的 CSS 的某个地方，你有另一个宽度为 100% 的 div，并且还有填充。由于填充值添加到宽度，该 div 的值变得大于 100%。解决方案是确保不要在任何设置为 100% 宽度的 div 上使用填充。如果您需要填充，请尝试将填充添加到 div 内的元素。
回答by ElonU Webdev
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%;
只是为了确保 safari 知道 field 的父容器也是 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?
这应该强制一个侧滚动条，即使它是灰色的。我想知道某些 webkit 渲染是否会暂时闪烁滚动条，但无法返回空间。有这样的作品吗？
回答by mr5
I have fixed mine by
我已经修复了我的
body
{
background-color:#dddddd;
width:100%;
margin:0px;
}
回答by user1985646
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.
根据我在类似问题上的经验。当您的代码不会在移动设备上（但会在桌面上）完全拉伸时，修复它就是找到一些无形地推动边界的元素。应该有一些项目超出了它的边界 - 对我来说，它是一个标志图像，它在标题 div 外粘了大约 20 像素。您可以通过为所有内容设置边界或一次消除一件事来找到这一点。找到它后，您可以移动它或移除它，以便让物体再次完全伸展。
回答by clowwindy
I fixed by using display: table-cell
我通过使用 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;
}
回答by Chibbie
I have fixed mine by adding
我通过添加修复了我的
html, body
{
width: 100%;
margin: 0px;
}
happy coding!!!
快乐编码！！！
回答by Thomas Pollock
Noticed this wasn't answered. I was having the same issue. I added the following lines to my CSS class:
注意到这没有回答。我遇到了同样的问题。我在 CSS 类中添加了以下几行：
margin-right:-10px;
margin-left:-10px;
回答by ggoren
adding min-width: 100%seems to do the trick
添加min-width: 100%似乎可以解决问题
