Question

I’m trying to make a mask over a list of elements contained in a fixed width and height parent. The parent is set to overflow:auto. When we add elements to the list, the parent scrolls, but the mask keeps its original height, and I would like it to fill the parent all the way to the bottom of the scroll.

Here’s a simplified version of my code:

http://jsfiddle.net/Z7sRh/

html:

<div id="test">
<div id="mask">&nbsp;</div>
<ul>
    <li>Element</li>
    <li class="over">Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
</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;
}

Some elements need to be over the mask, and a javascript solution would be acceptable, although html/css is better.

I searched the web for an answer and couldn’t find it, I hope some of you guys can help me.

Answer 1

http://jsfiddle.net/Z7sRh/3/

$('#mask').css('height', $('ul').css('height') );​