Javascript 根据矩形的数量用矩形填充页面

我想基于此行为在我的页面中显示一些div：

根据div的数量，它们将占据页面的大小，直到有8个div为止，然后在9+时，它们将保持大小，页面将变得可滚动

我曾想过像这样使用FlexBox，但无法达到预期的效果

因此，我开始使用JS创建一个类，如果有一个元素，称为“一”，两个元素称为“二”，等等，然后使用这个css（更少）：

等等，最多8个

---

它工作正常，但任何更好、更简洁的想法都是受欢迎的

由于以下原因，div从底部填充：

• 显示：在
  

• 显示：表格单元格

  和

  垂直对齐：底部

  在

通过添加和删除div进行测试

div:last child:nth child（奇数）

是将最后一个奇数div 100%传播的神奇酱汁

HTML

---

你能解释一下什么时候底部有一个全宽凹槽，中间有一个半宽凹槽吗？解释div放置的算法。没有具体的算法，行为由每个案例的图像详细说明。使用了25%的高度，而不是80像素，效果非常好。与图片中的不完全一样（有6个分区，100%宽度应该在第二个分区上，而不是最后一个分区上），但我认为设计师会同意的，我只是在玩弄这个概念，我相信这是可以做到的。尝试：）另外，我在

.wrap

的高度上发现了一个拼写错误

：

，所以请注意。只要与设计师交谈，如果图7底部有100%的宽度，他就可以了。第一个解决方案的唯一问题是，第一个矩形不是真正的矩形，它是包装器的空部分；因为我必须把背景图像放在矩形上，我不能把它放在第一个上，因为它会占据整个包装

.container.one {
    div:nth-child(1) {
        width: 100%;
        height: 100%;
    }
}
.container.two {
    div:nth-child(1) {
        width: 100%;
        height: 75%;
    }
    div:nth-child(2) {
        width: 100%;
        height: 25%;
    }
}

<div class="wrap">
    <div><div> 
    <-- ... -->
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
}
.wrap {
    display: table-cell;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}
.wrap div {
    border: solid 1px #CCC;
    float: left;
    width: 50%;
    height: 25%;
}
.wrap div:last-child:nth-child(odd) {
    width: 100%;
}