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

Question

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

我在全屏容器中有两个div，就像提供的图像一样。他们有position:absolute;

• 红色的，我希望它总是一个正方形，最适合屏幕，所以我使用高度100％和宽度“100vh”，即100％的视口高度。

• 绿色的：我希望它能覆盖剩余的宽度。

我想知道纯CSS中是否可能来表示绿色div的剩余宽度。您可以使用top,left,bottom,right,width,height,::before,::after但div必须绝对定位（没有浮动等等。）

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

Answer 1

  

绿色的：我希望它能覆盖剩余的宽度。

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

width: calc(100vw - 100vh);

工作示例：

.red {
  height: 100vh;
  width: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: #f00;
}

.green {
  height: 100vh;
  width: calc(100vw - 100vh);
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}

<div class="red"></div>
<div class="green"></div>