html 左中右自适应布局

来源：互联网发布：ubuntu samba添加用户编辑：程序博客网时间：2024/05/07 23:08

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

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

截图：

code：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD LEVEL1//EN"><html>  <head>    <title>MyHtml.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script>var left,center,right,width;window.onload=function(){left=$('left');center=$('center');right=$('right');onresize();};window.onresize=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);}</script><style>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;}</style>  </head>    <body>    <div id="left"></div><div id="center"></div><div id="right"></div>  </body></html>

html 左中右 自适应布局

html 左中右自适应布局