100% 高度的 div 被另一个 div 覆盖并淡入答案

【问题标题】：100% height div that gets covered by another div with fade in100% 高度的 div 被另一个 div 覆盖并淡入
【发布时间】：2017-03-06 09:05:46
【问题描述】：

我正在尝试让抽屉在我的页面上淡出效果。我需要制作一个占屏幕高度 100% 的 div。然后单击按钮，另一个 div 淡入并接管屏幕。不知道该怎么做？

这是我的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%;
}

这里 div main-section 应该占据 100% 的高度，并且 div magazine-detail 应该在单击按钮时淡入。我想知道如何实现这一目标？当magazine-detail 首次隐藏时，我正在努力将第一个 div 设置为 100% 高度。

【问题讨论】：

请出示您的 CSS。

标签： javascript jquery html css

【解决方案1】：

你需要给你的页面一个绝对的位置。

首先将您的#app 设为一个相对容器，这样，它的任何具有绝对定位的子元素都将相对于父元素定位。

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

接下来，给您的“页面”一个绝对位置并调整它们的大小。这将导致它们位于#app 容器的左上角并填充它的宽度和高度。

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

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

您可以通过将z-index 属性添加到“页面”来控制哪个图层位于顶部。

【讨论】：

谢谢，就是这样！