css - 我可以使用 calc 和 var 根据宽度更改我的 div 高度吗？

Question

假设我的 470px 的 div width 是 100% 而 350px 是 0% 高度的。
从100%到0%我想要我的div 高度从 100px 减少到 0px。

希望不要太困惑...

不用javascript可以吗？

这是一个空的间隔 div。

Answer 1

Codepen demo

CSS

div {
   background: #9bc;
   max-width: 470px;
   min-width: 350px;
   max-height: 100px;
   height: calc(0.83333 * 100vw - 291.66px);
   overflow: hidden;
}

高度是用equation of the line passing from 2 points计算出来的.

我向您展示了计算，这样您就可以根据自己的喜好更改该表达式