浏览器窗口大小改变时，动态改变div高度和宽度

来源：互联网发布：2016世界各国经济数据编辑：程序博客网时间：2024/06/05 01:07

header、footer高度固定，aside宽度固定，当浏览器窗口大小改变时，动态改变aside高度，content高度和宽度。

页面布局
html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>changeble</title>    <link rel="stylesheet" href="changeblePage.css"/></head><body><div class="header">    header</div><div id="aside">    aside</div><div id="content"> content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content\    content content content content content content content content content content content content content content content content content content content    content content content content content content content content content content content content content content content content content content content    content content content content content content content content content content content content content content content content content content content    content content content content content content content content content content content content content content content content content content content    content content content content content content content content content content content content content content content content content content content</div><div class="footer">    footer</div><script src="changeblePage.js"></script></body></html>

css

.header{    height: 40px;    width:100%;    position: fixed;    top:0;    left:0;    background-color: #cccccc;}.footer{    height: 40px;    width:100%;    position: fixed;    bottom:0;    left:0;    background-color: #cccccc;}#aside{    position: absolute;    margin:0;    left: 0;    top:40px;    bottom:40px;    width:100px;    background-color: antiquewhite;}#content{    position: absolute;    margin:0;    left:100px;    top:40px;    bottom:40px;    background-color:salmon;    overflow: auto;}

javascript

/** * Created by iamwe on 2017/3/9. */var winWidth = 0,winHeight = 0;function changebleWidthHeight() {    if (window.innerWidth)        winWidth = window.innerWidth;    else if ((document.body) && (document.body.clientWidth))        winWidth = document.body.clientWidth;//获取窗口高度    if (window.innerHeight)        winHeight = window.innerHeight;    else if ((document.body) && (document.body.clientHeight))        winHeight = document.body.clientHeight;//通过深入Document内部对body进行检测，获取窗口大小    if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)    {        winHeight = document.documentElement.clientHeight;        winWidth = document.documentElement.clientWidth;    }    document.getElementById("content").style.width = winWidth - 100;    document.getElementById("content").style.height = winHeight - 80;    document.getElementById("aside").style.height = winHeight - 80;}window.onresize = changebleWidthHeight();

0 0