展開全部

大致講一下思路。

1、設(shè)定一個最外層容器div-box，實現(xiàn)【頂部觸頂?shù)撞坑|底，div與頁面高度間固定差值】，在32313133353236313431303231363533e59b9ee7ad9431333363373664css文件中的.div-box下可修改margin數(shù)值)

2、前三個div可公用一個樣式 div1

3、第五個div絕對定位在底部 div5，需要將div-box的position設(shè)為relative，否則會基于body定位。

4、第四個div設(shè)置高度為100% (如果樣式需要設(shè)置高度撐滿整個頁面，那么最外層高度設(shè)置必須設(shè)置為100%)，絕對定位到div-box中。

以下是代碼。

html頁面代碼html>

div大小隨窗口大小變化div1固定高度div2固定高度div3固定高度div4動態(tài)高度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;

}

總結(jié)

以上是生活随笔為你收集整理的监测div大小变化_如何让div大小随窗口大小变化的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。