title: 100% height div that gets covered by another div with fade in
body: <p>I am trying to make a drawer fade in effect on my page. I need to make a div that takes 100% of the height of the screen. And then on click of the button another div fades in and takes over the screen. Not sure how to do that?</p>
  
  <p>This is my html:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  
  @section('head')
    @include('customer.layouts.partials.head')
  @show
  
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;div class="main-section"&gt;
        @section('topBar')
          @include('customer.layouts.partials.top-bar')
        @show
  
        @section('header')
          @include('customer.layouts.partials.header')
        @show
  
        @section('carousel')
          @include('customer.layouts.partials.carousel')
        @show
      &lt;/div&gt;
  
      &lt;div "id="magazine-detail"&gt;
        @section('magazine-detail')
          @include('customer.layouts.partials.magazine-detail')
        @show
      &lt;/div&gt;
  
      &lt;div class="large-10 large-centered columns content"&gt;
        @yield('content')
      &lt;/div&gt;
    &lt;/div&gt;
  
    @section('scripts')
      @include('customer.layouts.partials.scripts')
    @show
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.magazine-detail {
    display: none;
  }
  
  html, body {
    height: 100%;
  }
  
  .main-section {
    height: 100%;
  }
  </code></pre>
  
  <p>Here the div <code>main-section</code> should take 100% height, and div <code>magazine-detail</code> should fade in on a click of a button. I wonder how to achieve that?
  I am struggling with setting the the first div to 100% height when <code>magazine-detail</code> is first hidden.</p>