Я пытаюсь заставить ящик исчезать на моей странице. Мне нужно сделать div, который занимает 100% высоты экрана. А затем по нажатию кнопки другой 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 должен исчезать по нажатию кнопки. Интересно, как этого добиться? Я изо всех сил пытаюсь установить первый div на 100% высоты, когда magazine-detail впервые скрыт.
