Question

我正在尝试使用 maths 在WebKit（Chrome）中填充100％的视口。

我现在正在做的是计算元素的数量并将其除以100，然后根据liquid elements的基本计划将元素的所有宽度设置为结果百分比。

问题在于，随着元素数量的增加，即使添加了前几个元素，很快就会开始成为一个问题，当浏览器打架时，元素右侧会打开大量空间在百分比，像素和舍入之间。

所以我的问题是，您如何采用可变数量的元素并确保整个视口被填充？

CSS和Javascript都是公平的游戏，但我更愿意避免使用jQuery，除非它有一个非常简单的解决方案。但是，如果你只能通过jQuery来做，即使它更长，也可以发布它，我可以看看我是否可以解开它。

我应该明确规定此解决方案必须适用于液体布局。浏览器和包含元素必须能够调整到大约200px。依赖于切割已知数量像素的任何解决方案都不适用于我。

如果您不确定我的意思，我已发布test site。

Answer 1

display: table救援！

我的initial solution的问题当然是元素向左浮动然后给出明确的宽度。结果是，当浏览器将宽度舍入到最近的像素时，您会在视口的右侧获得跳跃，因为您会慢慢获得并消除总像素。

表的优点在于浏览器已经知道每个单元格应该填充表格宽度的100％部分。如果表格是视口的100％宽，并且您有4个单元格，则每个单元格将占视口的25％。添加另一个，浏览器将每个单元格尽可能接近视口的20％。它可以处理所有舍入，因此在任何给定时间，某些单元格可能比其他单元格更大，但差异始终是像素，视口仍然可以完美填充。

我能看到的唯一缺点是你需要有可以放入内容的元素才能使用display: table-cell，因为表格单元格是非块级元素，不能给出明确的宽度。他们需要内容才能展示。幸运的是，我可以ul li元素填充a元素，因此我可以很好地挂起CSS。

列表

<ul class="mess">
  <li class="mess-part"><a href="#"></a></li>
  <li class="mess-part"><a href="#"></a></li>
  <li class="mess-part"><a href="#"></a></li>
  <li class="mess-part"><a href="#"></a></li>
</ul>

您需要应用样式

.mess { display: table; height: 300px; width: 100%; margin: 0; padding: 0; }
.mess-part { display: table-cell; height: 100%; }

你会得到一个漂亮，漂亮，100％宽，总是充满液体布局的元素。

我发布了the fix的交互式版本。

非常整洁，嗯？

HT到this question让我的脑袋转动。

Answer 2

也许是因为例如5.4％是四舍五入到底部，所以如果你有10个元素，它们都会错过0.4％你缺少4％的页面，所以如果你有20个元素，你缺少8％，依此类推。也许你是Math.ceil 1个元素而Math.floor是下一个元素。右侧的空白区域较少。因为你每2个元素只会错过0.2％。但仍然会产生一个空白区域。

最好的解决方案是不使用％而是使用PX。因为那些是圆形到PX而不是％，这是更多。但是，您仍然可以使用Math.ceil和Math.floor来修复浮点数并且不再有空格。

使用可变数量的元素以编程方式填充100％的浏览器视口

2 个答案: