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