Наложение CSS на прокручиваемое DIV

У меня есть класс overlay. Цель состоит в том, что я могу добавить его в любой div для создания наложения при загрузке данных. Он отлично работает, за исключением divs, где содержимое может переполняться.Наложение CSS на прокручиваемое DIV

HMTL

<div id="myDiv" > 
    <div class="overlay"></div> 
    <div id="innerDiv"></div> 
</div>

CSS

.overlay{ 
    position: absolute; 
    background-color: #888888; 
    top: 0px; 
    opacity: 0.5; 
    bottom: 0px; 
    right: 0px; 
    left: 0px; 
    z-index: 50px; 
}

Вот пример на JSFiddle. Прокрутите вниз в поле, и вы увидите проблему.

источник

2015-03-16 Hazaart

Вы хотите что-то ищите? http://stackoverflow.com/questions/17405982/set-width-of-inner-div-on-scrollable-element-to-100-of-scrollable-width –

oh, nope. Вероятно, это так. http://stackoverflow.com/questions/15243053/child-height-to-be-100-of-scrollable-parent-content-height –

Без каких-либо JavaScript вы должны будете пройти height от innerDiv до .overlay css.

http://jsfiddle.net/urahara/8z842871/3/

.overlay { 
    display:block; 
    position:absolute; 
    background-color: #888888; 
    top: 0px; 
    opacity: 0.5; 
    height:600px; 
    overflow:hidden; 
    bottom: 0px; 
    right: 0px; 
    left: 0px; 
    z-index: 50; 
}

С JQuery вы можете сделать это динамически:

http://jsfiddle.net/urahara/8z842871/5/

$('.overlay').css('height', $('#innerDiv').height());

Ура!

источник

2015-03-16 15:58:43

Наложение CSS на прокручиваемое DIV

ответ

Смежные вопросы