铺满全屏的div

继承法

<style>
  * {
        margin:0;
        padding:0;
    }
       html,body{
           height:100%;
       }
       .box{
           height:100%;
           background-color:blue;
       }
</style>

<div class="box"></div>

position定位法 1

     * {
            margin:0;
            padding:0;
        }
        .box{
            position:absolute;
            width:100%; 
            height:100%;
            background-color:blue;
        }
        /* 定位之后元素会缩放至内容得大小 ,即由内容撑开，所以必须设置
            width:100%; 
            height:100%;
        */
</style>


<div class="box"></div>

定位法 2

<style>
     * {
           margin:0;
           padding:0;
     }
    .box{
           position:absolute;
           top:0;
           bottom:0;
           left:0;
           right: 0;
           background-color:red;
    }
</style>

<div class="box"></div>