html - スクロールバーが存在する場合、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でこれを達成できますか？external_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

これを試してください：高さ：100％よりも上：0 /下：0のトリックを使用するのが最善です

それがあなたの問題を解決するかどうかはわかりませんが、それは手がかりになる可能性があります;）

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

Answer 2

これを試して

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

Answer 3

CSS3 の Overflow プロパティを使用できます

オーバーフロー-x: 表示|非表示|スクロール|自動|非表示|コンテンツなし;

その div を x 軸でスクロール可能にしたい場合は、overflow-x : scroll;

望まない場合は、overflow-y : hidden;

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