html自适应页面上下左右分栏的处理技巧

html自适应页面上下左右分栏的效果可以借用CSS或者jQuery进行处理。

CSS中的width和height属性的值带%的情况：

height:100% 代表基于包含它的块级对象（即父元素）的百分比高度，此时为100%。

width:100% 代表基于包含它的块级对象（即父元素）的百分比宽度，此时为100%。

使某元素（例如id为container的元素）占据整个页面的全部时的CSS代码如下：

#container {
    width: 100%;
    height: 100%;
}

简单的带有的头注和脚注页面实例：

    
        
    
    
        

            
Header
            
Center
            
Footer
        
    

假如当一个父元素中有两个或多个元素时，需要其中一个元素占据除其他元素所占的空间之外剩下的所有空间，则可以在页面初始化后通过jQuery修改它的高度和宽度属性。

例如，其他元素总共占父元素高70像素、宽25像素的空间且都在一成片区域，父元素宽也为25像素。

// 页面初始化后调用
$(document).ready(function () {
    // 使窗口最大化
    if (document.body.offsetWidth < screen.width) {
        try {
            window.moveTo(0, 0);
            window.resizeTo(window.screen.availWidth, window.screen.availHeight);
        } catch (e) {
            throw e;
        }
    }
    // 使mainContent的高度为父元素的全部高度减去70像素的高度
    $(".mainContent").css('height', '100%').css('height', '-=70px');
    // 使mainContent的宽度为父元素的全部宽度减去25像素的宽度
    $(".mainContent").css('width', '100%').css('width', '-=25px');
});

参考自：css width: calc(100% -100px); alternative using jquery  http://stackoverflow.com/questions/11117216/css-width-calc100-100px-alternative-using-jquery