javascript - CSS(或JS)设置div的高度并使宽度等于正方形

Question

不知道为什么，但我很难把它变成一个可读的问题，但这里是。

我正在尝试找出一种方法来让两个堆叠的方形 div 填充浏览器的高度。我已经搜索并找到了很多方法来根据宽度保持 div 的正方形，但似乎无法找到任何基于视口(viewport)高度的东西。

到目前为止我有什么:http://codepen.io/jointmedias/full/mxlLC

基本上，根据上面的示例，无论浏览器的高度或宽度如何，我都需要红色和紫色的 div 始终为正方形。

有人有什么建议吗？提前致谢。

布莱恩

Answer 1

仅 CSS 解决方案:

.side-top, .side-bottom {
    width: 50vh;
    height: 50vh;
}

Demo

vh 是视口(viewport)高度百分比单位，属于 CSS3 Values and Units 的一部分.

现在对 Viewport CSS 单位的支持非常好，请参阅 support table .

如果您需要支持 IE<=8 和 android stock 浏览器，您将需要一个 JS 回退。