滚动后背景不扩展

Question

screenshot of the webpage 应该很好地解释了我的问题。请记住，我给背景的高度是 height: 100vh;。所以它覆盖了页面的初始视图。当我向下滚动时内部 div 溢出并且背景没有扩展时，问题就来了。我已经尝试过 overflow: hidden; 和 overflow: scroll;

这是 <body> 元素中的 HTML 代码。我还使用 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;}

Answer 1

设置 background-repeat: no-repeat; background-attachment: fixed; 并删除 sidebar 和 main-area 的高度，这样背景将保持原样。我还为 class holder.

删除了 position: absolute;

这是完整的 CSS 代码：

.flex {
display: flex;
flex-direction: row;
}

.sidebar {  
background-image: url("assets/wall.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
flex-direction: column;
align-items: center;
padding: 5px 10px;
width: 20vw;
border-right: 2px solid #0097A7;}

#main-area{
width: 80vw;
background-image: url("background.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

.holder{
padding: 15px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}

滚动后背景不扩展

Background does not extend after scrolling

html

css

background

overflow

flexbox