I have been working on creating a sidebar that includes a background image with a transparent overlay. However, I encountered an issue where the overlay background does not stretch all the way to the bottom when the scroll bar becomes visible. Despite setting the height to 100%, it doesn't seem to be functioning as expected.
To see this issue in action, you can check out the reproduced fiddle here: https://jsfiddle.net/queeeeenz/7do4wysb/1/
Take a look at the screenshot below:
https://i.stack.imgur.com/4u1uc.png
Here is the HTML and CSS code snippet:
<html>
<head>
<style>
.sidebar {
position: fixed;
left: 0px;
top: 0px;
background: url('https://images.unsplash.com/photo-1610643748471-2eae4a44bd18?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80') center center / cover;
width: 240px;
overflow-y: auto;
height: 100%;
display: flex;
flex-direction: column;
padding: 20px;
}
.sidebar::after {
position: absolute;
z-index: 1;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
content: "";
display: block;
background: rgb(255, 255, 255);
opacity: 0.55;
max-height: 100%;
min-height: 100%;
}
.sidebar__item {
padding: 20px;
background: white;
border-radius: 7px;
margin: 10px;
}
.sidebar__content {
z-index: 2;
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="sidebar__content">
<div class="sidebar__item">Hello</div>
<div class="sidebar__item">Hello</div>
<div class="sidebar__item">Hello</div>
<div class="sidebar__item">Hello</div>
<div class="sidebar__item">Hello</div>
<div class="sidebar__item">Hello</div>
<div class="sidebar__item">Hello</div>
<div class="sidebar__item">Hello</div>
<div class="sidebar__item">Hello</div>
</div>
</div>
</body>
</html>