html实现页面左中右布局,html 左中右 自适应布局

在最新的html标准中 有了个calc css表达式，我们可以用这个来计算布局。

但是在古老的IE中，却不支持，为了所有浏览器的支持，这里用了js来做。

截图：

code：

MyHtml.html

var left,center,right,width;

window.οnlοad=function(){

left=$('left');

center=$('center');

right=$('right');

onresize();

};

window.οnresize=function(){

try {

width = document.body.clientWidth;

center.style.width = (width - left.clientWidth - right.clientWidth - 0) + "px";

}catch(e){

//小于0会报错

}

};

function $(id){

return document.getElementById(id);

}

body,html{

height:100%;

margin:0px;

padding:0px;

overflow:hidden;

}

#left,#center,#right{

width:200px;

height:100px;

background-color:rgb(34,124,134);

float:left;

height:100%;

}

#center{

background-color:red;

}