Как сделать div обложкой всей страницы, когда существует полоса прокрутки?

Question

<div id="outer_product_wrapper" style="display: none;"> 
     <div id="outer_inner_product_wrapper"> 
      <div id="inner_product_wrapper"> 
       Test 
      </div> 
     </div> 
    </div> 

Я хочу div, который заполняет всю страницу черным наложением. Как я могу достичь этого с помощью css? Я попытался с помощью позиции закрепленную на outer_product_wrapper, но тогда я потеряю скроллбар ...

#outer_product_wrapper{ 
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 

      background-color: rgb(0, 0, 0); 
      background-color: rgba(0, 0, 0, 0.6); 
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
     } 

#outer_inner_product_wrapper{ 
    ??? 
} 

Answer 1

попробовать это: это лучше всего использовать трюк топ: 0/Низ: 0, чем высота: 100%

Я не знаю, если это решит вашу проблему, но это может быть подсказкой;)

#outer_product_wrapper{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0px; 
    right: 0px; 
} 

Answer 2

вы можете использовать переполнение свойство CSS3

переполнение-х: видимый | Hidde п | прокрутка | авто | нет дисплея | нет-контента;

Если вы хотите, чтобы div прокручивался по оси x , тогда переполнение-x: прокрутка;

и если вы не хотите, то переполнение-y: скрыто;

#content 
{ 
width:300px; 
height:400px; 
overflow-x:scroll; 
overflow-y:hidden; 
} 

Answer 3

Попробуйте

#outer_product_wrapper 
{  
position: absolute; 
top: 0; 
left: 0; 
z-index: 9999; 
background-color: black; 
opacity: 0.85; 
}