如何实现网页左右两边盒子高度自适应布局

    最近在做一个项目时，有一个页面左侧有导航栏，右侧是内容，由于右侧内容不确定，所以右侧盒子的高度是根据内容的多少自动变化的，而我希望左侧导航栏的高度可以根据右侧盒子的高度变化而变化，当然，如果你是希望右边盒子高度自适应于左边也可以的。刚好我在慕课网上学习的时候看到一个老师讲了这种方法，今天就分享一下这个方法。

   要实现这个布局用到的属性有overflow,padding,margin。

下面就是我项目的截图，左边的导航栏高度自适应右边内容。话不多说，直接开始吧。

还是先写好html:

<span style="font-family:Comic Sans MS;font-size:14px;"><div class="all">
	<div class="left"></div>
	<div class="right"></div>
</div></span>

要注意，这两个盒子外面一定要有一个父元素包裹。

先做一个基本布局如下：

<span style="font-family:Comic Sans MS;font-size:14px;">.left{
			width: 200px;
			height: 200px;
			float: left;
			background-color: #678232;
		}
.right{
			width: 500px;
			height: 700px;
			float: left;
			background-color: #23ef67;
		}</span>

看看效果：

然后重点来了，基本思路是这样的，给两边盒子一个非常大的margin值，然后再给一个跟margin值相等的负的padding值，这个负的padding值是为了填充margin的，而由于我们给的margin值很大，为了避免滚动条滚到天荒地老，我们再给父盒子加一个overflow:hidden，两个子盒子也分别加一个overflow:hidden，就成功了，贴出代码：

<span style="font-family:Comic Sans MS;font-size:14px;">.all{
			overflow: hidden;
}
.left{
			width: 200px;
			height: 200px;
			float: left;
			background-color: #678232;
		 	overflow: hidden;
			margin-bottom: -10000px;
			padding-bottom: 10000px;  
}
.right{
			width: 500px;
			height: 700px;
			float: left;
			background-color: #23ef67;
		 	overflow: hidden;
			margin-bottom: -10000px;
			padding-bottom: 10000px;  
}</span>

最后效果：