Полностью покрыть перепускной DIV с другой DIV

Question

Это трудно один, чтобы объяснить, так что потерпите со мной (или просто пропустить прямо к jsfiddle)

У меня есть Div с максимальной высоты, определенной и overlow-х набор прокручивать. Внутри этого Div есть куча элементов списка (в данном случае - адреса). Естественно, их может быть много, и они могут переполняться, что прекрасно работает. То, что я хочу, - это «обложка», которая указывает, что эта панель отключена. Я сделал это, поставив абсолютно позиционированный div в основной div, вот так.

<div style="max-height:150px;overflow:auto;position:relative"> 
    <ul> 
     <li>Church Walk, Access To Foxholes Farm, DT2 9HG 
     </li> 
     <li>Garden Cottage, Access To Foxholes Farm, DT2 9HG 
     </li> 
     <li>Little Bride, Access To Foxholes Farm, DT2 9HG 
     </li> 
     ...etc 
    </ul> 
    <div id="overlayDiv" style="display:none;background-color:white;position:absolute;top:0px;opacity:0.8;height:100%;width:100% "> 
     <p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p> 
    </div> 
</div> 

Это сообщение появляется, когда пользователь что-то делает, накладывая содержимое и делая его отключенным. Большой! Проблема возникает, когда элементы списка переполняются. Когда появляется оверлейный div, он охватывает только текущую видимую часть родительского div, а это означает, что если я прокручу вниз по div, он будет отображаться «непокрытым», так как обложка div охватывает только родительский элемент, не считая его переполнения.

Это действительно сложно объяснить, поэтому перейдите на мой jsfiddle и щелкните один из адресов. Вы увидите, что div закрыт. Если вы затем прокрутите вниз этот div, вы увидите, что предметы в нижней части списка не обнаружены.

Это также работает в обратном порядке, поэтому если вы нажмете кнопку «Скрыть кнопку наложения», чтобы избавиться от обложки, а затем щелкните по одному из адресов в нижней части списка, вы увидите, что «обложка» по-прежнему охватывает только верхнюю часть div.

Любые идеи о том, как вы собираетесь делать эту обложку div, расширять всю высоту своего родителя, включая переполнение? Другие альтернативные решения приветствуются и поощряются. Имейте в виду, что мне не обязательно нужен текст «Поиск», который накладывается сверху, просто «обложка» будет достаточно.

Answer 1

3 дивы вместо 2 хорошо работает:

http://jsfiddle.net/JhGCn/2/

HTML:

<div id="geogPickerAddressResultContainer" style="max-height:150px;overflow:auto;position:relative"> 
    <div id="insideDiv"> 
     <ul ... 

     </ul> 
     <div id="overlayDiv" style="display:none;"> 
      <p style="margin-top:50px;text-align:center;font-size:18px;">Searching...</p> 
     </div> 
    </div> 
</div> 

CSS:

#insideDiv { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

#overlayDiv { 
    background-color: white; 
    position: absolute; 
    top: 0px; 
    opacity: 0.8; 
    height: 100%; 
    width: 100%;  
} 

Answer 2

Я бы накладку из родителей, установить z-index и поместить его по адресу picker с отрицательным отрывом.

http://jsfiddle.net/JhGCn/1/

#overlayDiv{ 
    background-color: white; 
    opacity: 0.8; 
    height: 100%; 
    width:100%; 
    position:absolute; 
    z-index:9999; 
    margin-top:-150px; 
    height:150px; 
} 

Answer 3

это работает тоже хорошо:

http://jsfiddle.net/JhGCn/3/

var height = $('#addressPicker li').height(); 
$.each($('#addressPicker li'), function (i, addr) { 
    height += $(this).height(); 
    $('#overlayDiv').css("height", height + "px"); 
    etc.. 

Answer 4

Этот шаблон я видел раньше, а также: http://jsfiddle.net/6oa6grn9/

#overlayDiv { 
    background-color: white; 
    opacity: 0.8; 

    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
}