监测div大小变化_如何让div大小随窗口大小变化

展开全部

大致讲一下思路。

1、设定一个最外层容器div-box，实现【顶部触顶底部触底，div与页面高度间固定差值】，在32313133353236313431303231363533e59b9ee7ad9431333363373664css文件中的.div-box下可修改margin数值)

2、前三个div可公用一个样式 div1

3、第五个div绝对定位在底部 div5，需要将div-box的position设为relative，否则会基于body定位。

4、第四个div设置高度为100% (如果样式需要设置高度撑满整个页面，那么最外层高度设置必须设置为100%)，绝对定位到div-box中。

以下是代码。

html页面代码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;

}