当附加 jQuery 时，保持与流体设计相同的 width/height 比率 div

Keep same width/height ratio of a div with fluid design when appending with jQuery

感谢您抽出宝贵时间。

我想达到：

  1. 用应该是正方形的 div 填充整个 window。
  2. 每行必须有 20 个方格。
  3. 我想在页面加载时使用 jQuery 添加它们。
  4. 我希望它们能够响应，目前我没有考虑屏幕从横向到纵向的移动设备。 Onyl 不同宽度的桌面设备。

它们中的每一个都有不同的颜色，所以我的 javascript 是一个循环，将每个不同的 div 附加到 HTML 容器。

这是追加里面的代码：

"<div class='square' style='background-color:" + color + "; width:5%; height:????;'></div>"

我希望自动高度能保持方形比例，但事实并非如此。 我可以使用 jQuery 来获取 div 的像素大小，然后使用它来设置高度，但这种方法让我怀疑响应能力，因为每次 window 已调整大小我也必须这样做。

关于如何实现这一点有什么想法或想法吗？

谢谢！

您可以使用这个 padding-bottom 技巧来创建一个 div 具有匹配尺寸的响应式。

Demo