滚动后背景不扩展答案

【问题标题】：Background does not extend after scrolling滚动后背景不扩展
【发布时间】：2020-10-31 13:37:07
【问题描述】：

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

这是<body> 元素内的 HTML 代码。我也在使用引导程序进行样式设置，因此您可能会看到一些引导程序类。

<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;}

【问题讨论】：

100vh 是浏览器窗口的高度。不是 HTML 页面的高度...使用不同的高度单位。或者设置min-height: 100vh，使其“至少”那么高。
使用height: 100vh; background-attachmnt: fixed;

标签： html css flexbox background overflow

【解决方案1】：

设置background-repeat: no-repeat; background-attachment: fixed; 并移除sidebar 和main-area 的高度，这样背景将保持原位。我还删除了 position: absolute; 类 holder。

这是完整的 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;
}

【讨论】：