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

Question

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

我在一个全屏容器中有两个 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

The green one: I'd like it to cover the remaining width.

您可以使用 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>

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

CSS for the remaining viewport width based on viewport height

html

css

css-position

viewport