如何让div大小随窗口大小变化

2024年11月09日 03:23

有5个网友回答

网友（1）：

大致讲一下思路。

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;
}