2

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

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

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 更好。

我在网上搜索了一个答案，找不到答案，希望你们能帮助我。

4

3 回答 3

1

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

$('#mask').css('height', $('ul').css('height') );​
于 2012-10-25T14:12:07.217 回答
0

查询：

$('#mask').height($('#test')[0].scrollHeight);

JavaScript（直接）

document.getElementById('mask').style.height = document.getElementById('test').scrollHeight + 'px';
于 2012-10-25T14:06:49.717 回答
0

你不是把这件事复杂化了吗？将 overs 背景颜色设置为白色，将 li 设置为灰色。结果相同，无论有多少元素。是否有某些原因需要额外的 div 和代码？ http://jsfiddle.net/calder12/Z7sRh/2/

li{
 background-color:rgba(0,0,0,.3);
}

.over{
background-color:white;
}
于 2012-10-25T14:07:03.493 回答