CODEWITHSUNDEEP
javascripthtmlcss
Yelstin Zeba
Yelstin Zeba

Reputation: 17

How to set variable height based on various screen resolutions using css and javascript

I have a div with 300px static height and another div with dynamic height below the static div. The div should be dynamic based on screen resolution can anyone help me out...

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

Upvotes: 1

Views: 4247

Answers (4)

Mahesh Murugaiyan
Mahesh Murugaiyan

Reputation: 21

I added a wrapper with height as 100vh. I read 1vh=1% of browser height, and 100vh equals 100% height. With the height set at 100vh, flex can fill the area. Check this:

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

Upvotes: 0

kpie
kpie

Reputation: 11110

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>

Upvotes: 1

Script Host
Script Host

Reputation: 922

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

Upvotes: 0

Tan Duong
Tan Duong

Reputation: 2142

You can use height: calc(100vh - 300px);

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

Upvotes: 1

Related Questions