I have been trying to create a mask for a list of elements within a fixed width and height parent. The parent has overflow:auto set, so when new elements are added to the list, the parent scrolls. However, I am facing an issue where the mask does not adjust its height along with the parent scroll, leaving empty space at the bottom.
For simplicity, here is a snippet of my code:
html:
<div id="test">
<div id="mask"> </div>
<ul>
<li>Element</li>
<li class="over">Element</li>
... (more list items) ...
</ul>
</div>
css:
#test{
width:150px;
height:200px;
background-color:#eee;
overflow:auto;
position:relative;
}
#mask{
background-color:rgba(0,0,0,.3);
min-height:100%;
width:100%;
position:absolute;
top:0;
left:0;
bottom:0;
z-index:1;
}
li{
background-color:white;
}
.over{
position:relative;
z-index:2;
}
While some elements need to be displayed over the mask, I am open to a javascript solution if needed, although a pure html/css approach is preferred.
I have searched online for a solution to this problem but could not find one. I hope someone in this community can offer some advice or help with this issue.