CODEWITHSUNDEEP
htmlcssscrollheight
Sarumanatee
Sarumanatee

Reputation: 530

Have child be at 100% height of a parent with overflow:auto

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.

Upvotes: 2

Views: 183

Answers (3)

Lowkase
Lowkase

Reputation: 5699

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

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

Upvotes: 1

Rick Calder
Rick Calder

Reputation: 18705

Aren't you overcomplicating this? Set overs background colour to white and the li to the grey. Same result and doesn't matter how many elements there are. Is there some reason you need the extra div and code? http://jsfiddle.net/calder12/Z7sRh/2/

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

.over{
background-color:white;
}

Upvotes: 0

Louis Ricci
Louis Ricci

Reputation: 21086

JQuery:

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

JavaScript (straight up)

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

Upvotes: 0

Related Questions