Ich habe ein Div mit 300px statischer Höhe und ein anderes Div mit dynamischer Höhe unter dem statischen Div. Das div sollte dynamisch sein, basierend auf der Bildschirmauflösung. Kann mir jemand helfen ...

<div class="static" style="height:300px;width:100%">
</div>
<div class="dynamic">
</div>
1
Yelstin Zeba 18 Apr. 2018 im 07:49

4 Antworten

Beste Antwort
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>
1
kpie 18 Apr. 2018 im 05:04

Ich habe einen Wrapper mit einer Höhe von 100vh hinzugefügt. Ich habe 1vh = 1% der Browserhöhe gelesen und 100vh entspricht 100% der Höhe. Bei einer auf 100 Vh eingestellten Höhe kann Flex den Bereich ausfüllen. Überprüfen Sie dies:

    .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>
0
kpie 19 Apr. 2018 im 17:19

Sie können height: calc(100vh - 300px); verwenden

<div class="static" style="height:300px;width:100%">
</div>
<div class="dynamic" style="height: calc(100vh - 300px);">
</div>
1
Tan Duong 18 Apr. 2018 im 04:54
<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>
0
Script Host 18 Apr. 2018 im 04:58