两列等高布局详解

两列等高布局应该还是比较常见的布局。通常在左侧固定，右侧自适应这样的页面中比较常见，下面放张我近期做的一个项目图片。

如上图所示，左侧的菜单栏和右侧的页面主体高度都是未知的，谁也不知道后期会加多少内容。但是为了页面好看，两边又必须要等高。下面给大家深度剖析两种方案实现等高布局。

方案1：纯CSS实现等高（代码少，效果好。也是我比较推荐的）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		*{margin: 0; padding: 0;}
		.wrap{overflow: hidden;}
		.left{width: 100px; height: 200px; float: left; background: #149BDF; padding-bottom: 5000px; margin-bottom: -5000px;}
		.right{width: 200px; height: 400px; margin-left: 150px; background: #32CD32;}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>
</html>

先上效果图，一睹为快。简单说下要点，外层包裹一个div，宽高不限，一定要加上overflow:hidden;（裁剪超出的部分）。右边的div决定整个页面的高度，所以左边的div高度是由右边的决定。左边的div我给出的高度为200，右边的为400，但是从视觉上却实现了等高，为什么。其根本原因在于设置它的padding-bottom值(俗称内补白)，众所周知，padding补出的地方是可以被background占有的。如果我们给左边的div只加一个padding值的话，页面将会是这样。如下图：

为什么，因为padding值也是要占据空间的，即使最外层div设置了overflow:hidden;但是此时它的div是由左边的div决定的，我们要做的是最外层div的高度由右边的决定，并且左边的div可视范围也是由右边的div决定。这时，我们给左边的div加上与它的padding值相等的负margin值。效果如下图所示，此时去掉了最外层div的overflow:hidden;

如上图所示，最外层div的高度为400，跟右边的div是相等的。而左边的div看似长长的一坨，实际占据的高度只有200，也就是它自身的高度，因为负margin值将它的padding占据的高度给抵消了。仅仅是占据的空间抵消了，但实际上被人们看到的那一"坨"还是很长很长的,我们加个overflow:hidden;将它"切"了，然后任意调整右边div的高度就可以看到等高效果了。

方案2：纯JS实现等高(简单粗暴，易于理解，直接上代码)

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		*{margin: 0; padding: 0;}
		html,body{height: 100%;}
		.wrap{height: 100%;}
		.left{width: 100px; height: 200px; float: left; background: #149BDF;}
		.right{width: 200px; height: 50%; margin-left: 150px; background: #32CD32;}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		var h = $('.right').height();
		console.log(h);
		$('.left').height(h);
	</script>
</body>
</html>

效果跟第3张图一样，就不一一展示了，但是上面的方法有一个弊端。因为js是在页面加载完后执行的，且只执行一次。如果我们更改浏览器窗口的大小，那么就悲剧了。

看变成这样子。右边的div高度由css决定，很顺从的随着浏览器改变而改变。左边的高度由js决定的，必须刷新才能改变。影响体验呀

不过没事，车道山前必有路。这点小事不算事。jquery中有一个监听浏览器窗口改变的函数，叫resize()。改变一下窗口大小，执行一次函数就可以了。上代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		*{margin: 0; padding: 0;}
		html,body{height: 100%;}
		.wrap{height: 100%;}
		.left{width: 100px; height: 200px; float: left; background: #149BDF;}
		.right{width: 200px; height: 50%; margin-left: 150px; background: #32CD32;}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		function setHeight(){
			var h = $('.right').height();
			console.log(h);
			$('.left').height(h);
		}
		setHeight();
		$(window).resize(function(){
			setHeight();
		})
	</script>
</body>
</html>

好了，完结！

两列等高布局详解

猜你喜欢