jQuery实现布局高宽自适应

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

 

主要通过 jQuery.resize() 这个方法，也就是当窗口大小改变时重新计算布局的高宽。

 

Html代码

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

 

 

Js代码

$(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() - 30;
    $('#left').height(h);
    $('#right').height(h-20);
}