Скриншот веб-страницы должен очень хорошо объяснить мою проблему. Имейте в виду, что высота, которую я дал фону, составляет height: 100vh;. Таким образом, он покрывает первоначальный вид страницы. Проблема возникает, когда внутренние блоки div переполняются, а фон не расширяется при прокрутке вниз. Я уже пробовал overflow: hidden; и overflow: scroll;
Это код HTML внутри элемента <body>. Я также использую bootstrap для стилизации, поэтому вы можете увидеть некоторые классы bootstrap.
<div class="flex">
<div class="sidebar">
<div class="search sidebar-btn" sidebar-btn>
<input class=" shadow-sm search-area" type="text" placeholder="search">
<div class="shadow-sm search-icon"><img class="magnifying-glass" src="assets/magnifying-glass.png">
</div>
</div>
<div><a href="#" class="sidebar-btn btn btn-dark">Home</a></div>
<div><a href="#" class="sidebar-btn btn btn-dark">Profiles</a></div>
<div><a href="#" class="sidebar-btn btn btn-dark">About Us</a></div>
</div>
<div id="main-area" class="page">
<div class="holder">
<div class="card polaroid">
<img src="image1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Placeholder</p>
</div>
</div>
<div class="card polaroid">
<img src="image2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Placeholder</p>
</div>
</div>
<div class="card polaroid">
<img src="image3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Placeholder</p>
</div>
</div>
<div class="card polaroid">
<img src="image4.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Placeholder</p>
</div>
</div>
</div>
</div>
</div>
Это css. Файл слишком длинный и беспорядочный, поэтому я включил только соответствующие классы.
.flex {
display: flex;
flex-direction: row;}
.sidebar {
background-image: url("assets/wall.jpg");
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px 10px;
width: 20vw;
height: 100vh;
border-right: 2px solid #0097A7;}
#main-area{
width: 80vw;
height: 100vh;
background-image: url("background.jpg");
background-position: center;
background-size: cover;}
.holder{
padding: 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: absolute;
justify-content: space-around;}