html代码如下
<div class="main">
<div class="box1"></div>
<div class="box2"></div>
</div>
第一种方式,利用定位
html,body{
height: 100%;
margin:0px;
padding:0px;
}
.main{
position: relative;
height: 100%;
}
.box1{
height: 100px;
background-color: red;
}
.box2{
position: absolute;
width: 100%;
top: 100px;
bottom: 0px;
background-color: blue;
}
第二种方式,同样是定位,不过需要对main设置box-sizing: border-box;
.main{
position: relative;
height: 100%;
padding-top: 100px;
box-sizing: border-box;
}
.box1{
position: absolute;
top: 0px;
height: 100px;
width: 100%;
background-color: red;
}
.box2{
height: 100%;
background-color: blue;
}
第三种方式,利用css3的计算属性calc,css代码最少。
.main{
height: 100%;
}
.box1{
height: 100px;
background-color: red;
}
.box2{
height: calc(100% - 100px);
background-color: blue;
}
`