Для этого добавляем в нужный блок строку
height: calc(100vh - 100px); где "100px" - это высота которая будет отведена к верхнему меню сайта над каруселью.
т.е к примеру будет так
.container-001 {
background-color: #ffffff;}
.container-001-content {
height: calc(100vh - 100px);
border: 1px solid;
background-color: #ffffff;
width: 1200px;
margin: auto;
display: flex;
justify-content: space-between;
padding: 15px 10px 15px 10px;}
HTML
<div class="container-004 overlay-black" style="background-image: url(assets/images/back001.jpg);">
<div class="container-004-content">
</div>
</div>
CSS
.container-004 {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;}
.container-004-content {
width: 1200px;
height: 600px;
margin: auto;
display: flex;
justify-content: center;
padding: 50px 10px 50px 10px;}
В данном примере контент 3 блока наслаивается на 4 блок.
HTML
<div class="container-003">
<div class="container-003-content">
<div class="container-003__info">
<p class="container-003__info-text">Lorem ipsum dolor sit amet, consectetur adipiscing</p>
<div class="container-003__info-link">
<a class="container-003__info-link-lnk" href="">Заказать звонок</a>
</div>
</div>
</div>
</div>
<div class="container-004 overlay-black" style="background-image: url(assets/images/back001.jpg);">
<div class="container-004-content">
</div>
</div>
CSS
.container-003-content {
width: 1200px;
margin: 0px auto -70px auto;
display: flex;
justify-content: center;
padding: 50px 10px 50px 10px;
position: relative;
z-index: 10;}
HTML
<div class="container-page-001 overlay-black" style="background-image: url(<?=$image_page;?>);">
<div class="container-page-001-content">
ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
</div>
</div>
<div class="container-page-002">
<div class="container-page-002-content">
КОНТЕНТ
</div>
</div>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh;}
.container-page-002 {
background-color: #000000;
flex-grow: 1;}