0

I am trying to set up a hero section where the div takes up 100vh minus the height of the header. I originally set the css height property to calc(100vh - 310px). 310px is the height of the header on my monitor. However I am trying to find a responsive solution, where the height of the header is dynamic and can change based on screen size. Not sure how to go about doing this. I assume it is not possible using css and am fine using javascript/jquery to solve this. 

<header></header>
<div class="heroSection"></div>

.heroSection {
   height: calc(100vh - 310px)
}
user9664977
  • 789
  • 2
  • 15
  • 28
  • Hey @termain Afif mind linking to where this was asked before, because I've searched for a way to do this without finding any results – user9664977 Jun 22 '18 at 19:26
  • the link is on the top of your actual question ;) and you need to carefully read all the answers/comments and you will find more than one way to do this with only CSS – Temani Afif Jun 22 '18 at 19:33

1 Answers1

-1

You could use fill-available property for this.

.heroSection {
    height: -moz-available;          /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    height: fill-available;
}
Gabriel Bucsan
  • 1
  • 1