2

固定幅と高さの親に含まれる要素のリストにマスクを作成しようとしています。親はoverflow:autoに設定されています。リストに要素を追加すると、親はスクロールしますが、マスクは元の高さを維持するため、親をスクロールの一番下まで埋めたいと思います。

これが私のコードの簡略版です：

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

一部の要素はマスクの上に置く必要があり、html/css の方が優れていますが、javascript ソリューションが受け入れられます。

ウェブで答えを検索しましたが、見つかりませんでした。皆さんの助けを借りてください。

4

3 に答える 3

1

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

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

JQuery:

$('#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 に答える