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实现这一点？我曾尝试使用固定在 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

试试这个：最好使用技巧 top:0/bottom:0 而不是 height:100%

我不知道它是否能解决你的问题，但它可能是一个线索；）

#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 的溢出属性

溢出-x：可见|隐藏|滚动|自动|无显示|无内容；

如果您希望该 div 可在 x 轴上滚动，则 overflow-x ：滚动；

如果您不想要，则溢出-y：隐藏；

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