基于视口高度的剩余视口宽度的 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>