html 左中右自适应布局(使用calc css表达式)_心得技巧教程-查字典教程网
html 左中右自适应布局(使用calc css表达式)
html 左中右自适应布局(使用calc css表达式)
发布时间:2017-01-06 来源:查字典编辑
摘要:在最新的html标准中有了个calccss表达式,我们可以用这个来计算布局。但是在古老的IE中,却不支持,为了所有浏览器的支持,这里用了js...

在最新的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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新心得技巧学习
    热门心得技巧学习
    网页设计子分类