html 左中右自适应布局

最新推荐文章于 2022-03-13 12:47:33 发布

潘敬

最新推荐文章于 2022-03-13 12:47:33 发布

阅读量4.6k

点赞数 1

分类专栏： JavaScript Html 文章标签：函数浏览器 Internet Explorer CSS

本文链接：https://blog.csdn.net/dreamerframework/article/details/9083431

版权

JavaScript 同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

Html

23 篇文章 0 订阅

订阅专栏

在最新的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.ο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);
		}
		
	</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>

潘敬

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 左中右自适应布局

在最新的html标准中有了个calc css表达式，我们可以用这个来计算布局。但是在古老的IE中，却不支持，为了所有浏览器的支持，这里用了js来做。截图：code： MyHtml.html var left,center,right,width; window.onload=functi
复制链接

扫一扫