css - 用可变数量的元素以编程方式填充 100% 的浏览器视口(viewport)

Question

我正在尝试使用数学在 WebKit (Chrome) 中填充 100% 的视口(viewport)。

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

问题是随着元素的数量变得非常多，但即使在添加了前几个元素之后，很快就会出现一个问题，即随着浏览器的斗争，元素右侧会出现大量空间在百分比、像素和舍入之间。

所以我的问题是，您如何才能采用可变数量的元素并确保填满整个视口(viewport)？

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

我应该明确规定，此解决方案必须适用于流式布局。浏览器和包含的元素必须能够调整到大约 200 像素。任何依赖于分割已知数量像素的解决方案对我来说都不起作用。

我发布了一个 test site如果您不确定我的意思。

Answer 1

display: table 来拯救!

我的 initial solution 的问题当然，就是元素向左浮动，然后给定显式宽度。结果是，当浏览器将宽度四舍五入到最接近的像素时，当您慢慢增加和减少总像素时，您会在视口(viewport)的右侧出现跳动。

表格的美妙之处在于浏览器已经知道每个单元格应该准确地填充表格宽度的 100%。如果表格的宽度为视口(viewport)的 100%，并且您有 4 个单元格，每个单元格将占视口(viewport)的 25%。添加另一个，浏览器让每个单元格尽可能接近视口(viewport)的 20%。它为您处理所有舍入，因此在任何给定时间，一些单元格可能比其他单元格大一个像素，但差异始终是一个像素，并且视口(viewport)仍然完美填充。

我能看到的唯一缺点是你需要有可以放入东西的元素才能使用 display: table-cell 因为表格单元格是非 block 级元素并且可以' 被赋予明确的宽度。他们需要内容才能显示。对我来说幸运的是，我可以有一个 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让我头脑中的齿轮转动。