推荐回答（5个）
大致讲一下思路。
1、设定一个最外层容器div-box，实现【顶部触顶底部触底，div与页面高度间固定差值】，在css文件中的.div-box下可修改margin数值）
2、前三个div可公用一个样式 div1
3、第五个div绝对定位在底部 div5，需要将div-box的position设为relative，否则会基于body定位。
4、第四个div设置高度为100% （如果样式需要设置高度撑满整个页面，那么最外层高度设置必须设置为100%），绝对定位到div-box中。
以下是代码。
html页面代码
div大小随窗口大小变化
div1固定高度
div2固定高度 div3固定高度 div4动态高度 div5固定高度
css样式
html,body{
height:100%;
margin: 0;
font-size: 24px;
color: #fff;
font-family: '微软雅黑';
line-height: 50px;
text-align: center;
}
.div-box{
position: relative;
width: 320px;
height: 100%;
margin: 20px 0; margin-left: 120px;
background: #87CEFA;
border: #ccc solid 5px;
}
.div1{
border: #fff solid 1px;
height: 50px;
}
.div4{
position: absolute;
width: 100%;
border: #fff solid 1px;
height: 100%;
}
.div5{
position: absolute;
border: #fff solid 1px;
width: 100%;
height: 50px;
bottom: 0;
}
