如何使用CSS和JavaScript根據各種屏幕分辨率設置可變高度

Question

我有一個div的靜態高度為300px，另一個div的動態高度低於靜態div。 div應該基於屏幕分辨率是動態的，任何人都可以幫助我...

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

Answer 1

您可以使用height: calc(100vh - 300px);

<div class="static" style="height:300px;width:100%">
</div>
<div class="dynamic" style="height: calc(100vh - 300px);">
</div>

Answer 2

 html,body{height:100%;} .dynamic{ height:calc(100% - 100px); background-color: lightblue; } 

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

Answer 3

<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>

Answer 4

我添加了一個高度為100vh的包裝器。 我讀取了1vh = 1％的瀏覽器高度，而100vh等於100％的高度。 將高度設置為100vh，flex可以填充該區域。 檢查一下：

  .wrapper{ display:flex; flex-direction:column; height: 100vh; } .static{ height:300px; width:100%; background-color: steelblue; } .dynamic{ display:flex; flex:1; background-color: lightgreen; } 

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