div 不能占满整个页面

在页面中,有时候我们想自己写个遮罩层,让它的宽度和高度都占满整个可见页面区域,css设置好了,但是还是没有得到想要的

效果。

遮罩层用<div>表示,是body的直接子元素。

部分.html代码如下

<div id="bg"></div>

.css代码如下

#bg{
    position:fixed;
    top:0px;
    left:0px;

    right:0px;

    bottom:0px;
    height:100%;
    width:100%;
    z-index: 37;
    background-color: rgba(0,0,0,0.5);
}

html{

    height:100%;

    width:100%;

}


body{

height:100%;

width:100%;

}

*{

margin:0px;

padding:0px;

}

显示的效果如下:

div 不能占满整个页面

从上图可以看出,遮罩层没有占满整个浏览器页面。

分析:在css中已经设置了Body和html的width和height都为100%,并且设置*{ margin:0px;padding:0px},消除浏览器的默认设置

         并且设置了div的height   width都为100%,这个100%是相对父元素,也就是body,但是他并没有占满整个父元素。

解决方法

        css设置:width结合min-width     height结合min-height  (注意一般将width设成百分比都还会设置min-width ,height同理)

显示效果如下:

 div 不能占满整个页面

现在遮罩层占满整个可见页面了。