Question

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

以下是我的代码的简化版本：

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') );

Answer 2

JQuery的：

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

JavaScript（直接）

document.getElementById('mask').style.height = document.getElementById('test').scrollHeight + 'px';

Answer 3

你不是太复杂了吗？将背景颜色设置为白色，将li设置为灰色。结果相同，无论有多少元素都无关紧要。有什么理由需要额外的div和代码吗？ http://jsfiddle.net/calder12/Z7sRh/2/

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

.over{
background-color:white;
}

让孩子在父母的100％身高处有溢出：自动

3 个答案: