100vh -20px

`100vh - 20px` 表示视口高度减去 20 像素的高度值。在网页开发中，可以使用这个值来创建一个占据整个视口高度，但是底部留有一定间隔的元素。例如：

<div style="height: calc(100vh - 20px);"></div>

上面的代码中，我们使用 `calc` 函数计算样式的高度值，这个值是视口高度减去 20 像素后的结果。这样，这个元素就会占据整个视口高度，但是底部会留有 20 像素的间隔。

相关问题

``` height: calc(100vh - 120px - 180px) !important; ```

这行代码是一个CSS样式规则，用于设置元素的高度。具体解释如下：

height: calc(100vh - 120px - 180px) !important;

- `100vh`：视口高度的百分比，表示元素的高度将占据整个视口的百分之一。
- `- 120px`：减去120像素的高度。
- `- 180px`：再减去180像素的高度。
- `!important`：表示这个样式规则具有最高优先级，将覆盖其他可能存在的相同属性的样式规则。

综上所述，这行代码的作用是将元素的高度设置为视口高度减去120像素和180像素后的值，并且具有最高优先级。

div高度为100vh-80px 宽度为100vw,旋转-90度后，如何实现旋转后，高度和宽度和之前效果一样

当你想要在一个div上应用一个-90度的旋转，同时保持它的高度和宽度与其原始尺寸相对应（即高度变为100%视口高度减去80px，宽度变为100%视口宽度），你需要使用CSS的`transform-origin`属性和一些计算单位。由于旋转后的宽度会变成原来高度，高度会变成原来宽度，所以我们需要调整旋转元素的位置和大小来匹配新的方向。

首先，设置`transform-origin`到元素的中心，这样旋转后元素的中心位置不会改变。假设你的元素初始定位在左上角，那么设置为`top left`。然后，应用旋转和相应的尺寸变化。

.parent-container {
  position: relative; /* 添加这个来管理绝对定位的子元素 */
}

.rotation-box {
  position: absolute;
  top: calc(50% - (height / 2)); /* 初始高度的一半 */
  left: calc(50% - (width / 2)); /* 初始宽度的一半 */
  width: 100vw; /* 视口宽度 */
  height: 100vh - 80px; /* 视口高度减去80px */
  transform: rotate(-90deg);
  transform-origin: top left; /* 旋转中心点在左上角 */
}

请注意，这里的`height`和`width`是基于元素初始状态的值，而不是旋转后的尺寸。如果你希望旋转后的元素高度为100%，宽度也为100%，这可能需要依赖于HTML结构和具体的滚动需求。