如果页面宽度增加，则动态增加 div 的高度

Question

在我的 CSS 我想：

• 让 div 永远不会低于某个高度（最小高度）
• 让 div 永远不会超过特定高度（最大高度）
• 如果我增加页面宽度，我希望 div 高度动态增加（或者如果我减少页面宽度则减少）。

类似于：

div{
  min-height: 10vw;
  max-height: 30vw;
  height: calc(??);
}

这是可以实现的吗？

Answer 1

你不会用Js？如果您使用 js，则可以使用 window.innerWidth 并将其分配给元素。 例如：

let windowWidth = window.innerWidth;
document.getElementById("myDynamicHeight").style.height = `${windowWidth}px`;