继承法
<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>