让孩子处于父母的 100% 高度且溢出：自动答案

【问题标题】：Have child be at 100% height of a parent with overflow:auto让孩子处于父母的 100% 高度且溢出：自动
【发布时间】：2012-10-15 17:42:59
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css scroll height

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

JQuery:

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

JavaScript（直截了当）

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

【讨论】：

【解决方案3】：

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

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

.over{
background-color:white;
}

【讨论】：

掩码背后的想法是使元素不可点击，它们在示例中不是交互的，以尝试提供一个最小的示例。