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();