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

您可以使用CSS3的Overflow属性

如果您希望该div可以滚动x轴 overflow-x：scroll;

如果你不想要那么溢出-y：hidden;

#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;
}

滚动条存在时如何使div覆盖整个页面？

3 个答案: