Question

我很难想到我认为这是一个死的简单问题。

我正在尝试创建一个跨越浏览器窗口宽度100％的div。 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>

Answer 1

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

Answer 2

我唯一想到的就是添加：

html, body
{
    width: 100%;
}

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

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

html { overflow-y: scroll; }

这应该强制侧滚动条，即使它是灰色的。我想知道一些webkit渲染是否会暂时闪烁一个滚动条，但是无法返回空间。任何这项工作？

Answer 3

我已经修好了我的

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

Answer 4

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

Answer 5

根据我在类似问题上的经验。当你的代码不能在移动设备上完全延伸（但是会在桌面上）时，修复它就是找到一些无形地推动边界的元素。应该有一些项目突破其边界 - 对我来说，这是一个徽标图像，在标题div之外粘贴了大约20px。你可以通过给一切边界或一次消除一件东西来找到它。一旦你找到它，你可以移动它或将其移除，以便让事情再次完全伸展。

Answer 6

我已经通过添加

修复了我的问题

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

快乐的编码!!!

Answer 7

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

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

Answer 8

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

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

8 个答案: