在页面布局（layout）时经常是上左右的框架布局并且需要宽、高度的自适应，div+css是无法实现（*hegz：div+css其实是可以实现的，利用jQuery比较容易实现浏览器的兼容性），所以需要js来辅助。

 

主要通过 jQuery.resize() 这个方法，也就是当窗口大小改变时重新计算布局的高宽。其它直接看代码即可。

 

HTML-code

<div id="header"></div>

<div id="left"></div>

<div id="right"></div>

 

JS-code

 

$(document).ready(function() {

initLayout();

$(window).resize(function(){

initLayout();

});

});

function initLayout() {

$('#right').width(document.documentElement.clientWidth - $("#left").width()-2);

var h = document.documentElement.clientHeight - $("#header").height()-5;

$('#left').height(h);

$('#right').height(h);

}