Marco Marco - 1 month ago 6
CSS Question

100% height div that gets covered by another div with fade in

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?

This is my html:

<html lang="en">

@section('head')
@include('customer.layouts.partials.head')
@show

<body>
<div id="app">
<div class="main-section">
@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
</div>

<div "id="magazine-detail">
@section('magazine-detail')
@include('customer.layouts.partials.magazine-detail')
@show
</div>

<div class="large-10 large-centered columns content">
@yield('content')
</div>
</div>

@section('scripts')
@include('customer.layouts.partials.scripts')
@show

</body>
</html>


CSS:

.magazine-detail {
display: none;
}

html, body {
height: 100%;
}

.main-section {
height: 100%;
}


Here the div
main-section
should take 100% height, and div
magazine-detail
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
magazine-detail
is first hidden.

Answer

You need to give your pages an absolute position.

First make your #app a relative container, this way, any of its child elements with absolute positioning will be positioned relative to the parent.

#app {
  position: relative;
  height: 100%;
}

Next, give your "pages" an absolute position and size them. This will cause them to be positioned in the top left corner of the #app container and fill the width and height of it.

.main-section {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#magazine-detail {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

You can control which layer is on top by adding z-index attributes to the "pages".

Comments