时间戳

首页 > 解决方案 > 滚动后背景不扩展

html - 滚动后背景不扩展

问题描述

网页截图应该很好地解释了我的问题。请记住，我给背景的高度是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;}

标签： htmlcssflexboxbackgroundoverflow

解决方案

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

推荐阅读