Javascript 用多个div填充屏幕

情况：我目前正在做一个网站设计，它要求我用

60px x 60px

div填充整个屏幕。它们只是像墙上的瓷砖，不同的是它需要有那么多的瓷砖，因为每一块都必须在悬停时将其颜色更改为随机值

问题：如果监视器分辨率改变，div的数量也会改变。我意识到我需要根据屏幕大小生成那些平铺div。我也意识到这可能是通过javascript实现的

---

问题：如何做到这一点？

我建议不使用javascript的解决方案。 隐藏溢出的容器。在左侧浮动的方形div内，因此它们填充：

<style type="text/css">
.container {
overflow: hidden;
height: whatever you want
width: whatever you want
}
.container .square {
float: left;
width: 60px;
height: 60px;
display: block;
}
</style>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
... enough of it ...
</div>

.集装箱{
溢出：隐藏；
身高：你想要什么都行
宽度：你想要什么都行
}
.集装箱.方形{
浮动：左；
宽度：60px；
高度：60px；
显示：块；
}
... 够了。。。

当然，您可以使用javascript。我建议使用prototype或jquery之类的库来处理onload和onresize事件。

---

然后通过屏幕的宽度和高度，你可以计算出你需要多少div。这可能类似于（宽度/60）*（高度/60）或……

您可以设置float和inline

div {
  display: inline;
  width: 60px;
  height: 60px;
  float: left;
}

---

当浏览器中可视空间的宽度不是60的倍数时，您的预期行为是什么？在结尾留下空白或显示一些div？一些div。它确实使它看起来像一堵大墙。