javascript - 用多个DIV填充屏幕

情境：我目前正在进行一个网站设计，它要求我用60px x 60pxdiv填充整个屏幕。它们只不过像墙上的瓷砖，只是需要有那么多瓷砖，因为每一块瓷砖都必须在悬停时将其颜色更改为随机值。
问题：如果监视器分辨率改变，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>

当然可以使用javascript。我建议使用类似于prototype或jquery的库并处理onload和onresize事件。
然后通过屏幕的宽度和高度，你可以计算出你需要多少div。可能是（宽/60）*（高/60）之类的。。。。