Html 基于视口高度的剩余视口宽度的CSS

这适用于平板电脑浏览器，它使用相对于视口宽度/高度的尺寸。为简单起见，假设为横向

我在一个全屏容器中有两个div，如图所示。他们的立场是：绝对的

红色的那个，我希望它总是一个正方形，最大的适合屏幕，所以我使用100%的高度和100%的宽度，也就是说，100%的视口高度

绿色的那个：我希望它能覆盖剩下的宽度

我想知道是否有可能在纯CSS中表示绿色div的剩余宽度。您可以使用top、left、bottom、right、width、height、：：before、：：after，但div必须绝对定位，不能使用float等

.red {
  height: 100%;
  width: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.green {
  height: 100%;
  width: /* ???? */;
  position: absolute;
  top: 0;
  right: 0;
}

绿色的那个：我希望它能覆盖剩下的宽度

您可以使用从宽度中减去高度，以获得剩余宽度：

width: calc(100vw - 100vh);

工作示例：

瑞德先生{ 高度：100vh； 宽度：100vh； 位置：绝对位置； 排名：0； 左：0； 背景：f00； } 格林先生{ 高度：100vh； 宽度：calc100vw-100vh； 位置：绝对位置； 排名：0； 右：0； 背景：绿色； }

---

哦，是的！我不知道这是可能的：我要读一本关于calcAlso的书，我从来不知道calc。太棒了。