如何使用css和javascript根据不同的屏幕分辨率设置可变高度

我有一个300像素的静态高度的div和另一个动态高度低于静态div的div。div应该是基于屏幕分辨率的动态div。有人能帮我吗

<div class="static" style="height:300px;width:100%">
</div>
<div class="dynamic">
</div>

---

您可以使用

高度：calc（100vh-300px）



@仅介质屏幕和（最大宽度：600px）{
.动态{
高度：100px；
} 
}
@仅介质屏幕和（最小宽度：600px）{
.动态{
高度：200px；
} 
} 
@仅介质屏幕和（最小宽度：768px）{
.动态{
高度：300px；
} 
} 
@仅介质屏幕和（最小宽度：992px）{
.动态{
高度：400px；
} 
} 
@仅介质屏幕和（最小宽度：1200px）{
.动态{
高度：500px；
} 
}

html，正文{高度：100%；}
.动态{
高度：计算（100%-100px）；
背景颜色：浅蓝色；
}
我添加了一个高度为100vh的包装器。我读到1vh=浏览器高度的1%，100vh等于100%高度。高度设置为100vh时，flex可以填充该区域。选中此项：


.wrapper{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.静态{
高度：300px；
宽度：100%；
背景颜色：钢蓝色；
}
.动态{
显示器：flex；
弹性：1；
背景颜色：浅绿色；
}

静态分区
动态分区
看起来这就是您要寻找的：除非父元素具有填充页面的高度，否则将无法工作。他们是否有其他解决方案，以便我可以降低代码重量？
<div class="static" style="height:300px;width:100%">
</div>
<div class="dynamic" style="height: calc(100vh - 300px);">
</div>

<div class="static" style="height:300px;width:100%">
</div>
<div class="dynamic">
</div>
<style>
  @media only screen and (max-width: 600px) {
.dynamic{
  height:100px;
  } 
}
@media only screen and (min-width: 600px) {
.dynamic{
  height:200px;
  } 
} 
@media only screen and (min-width: 768px) {
.dynamic{
  height:300px;
  } 
} 
@media only screen and (min-width: 992px) {
.dynamic{
  height:400px;
  } 
} 
@media only screen and (min-width: 1200px) {
.dynamic{
  height:500px;
  } 
}
</style>