HTML语言分栏左右比例怎么调整,html自适应页面上下左右分栏的处理技巧

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

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

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

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

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

#container {

width: 100%;

height: 100%;

}

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

html,body {margin:0;padding:0;

}

#mainContainer {

height:100%;

width:100%;

}

#header {

height:15%;

width:100%;

background-color:red;

}

#center {

height:75%;

width:100%;

background-color:blue;

}

#footer {

height:10%;

width:100%;

background-color:pink;

}

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