html - 让 child 处于 parent 的 100% 高度并溢出 :auto

Question

我正在尝试为包含在固定宽度和高度的父元素中的元素列表制作 mask 。父级设置为溢出:自动。当我们向列表中添加元素时，父级滚动，但掩码保持其原始高度，我希望它一直填充父级到滚动底部。

这是我的代码的简化版本:

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

一些元素需要覆盖在掩码上，javascript 解决方案是可以接受的，尽管 html/css 更好。

我在网上搜索了一个答案，没有找到，希望你们中的一些人能帮助我。

Answer 1

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

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