圣杯模型和双飞翼模型浅析（高度）

圣杯和双飞翼都旨在实现三列的布局，中间内容宽度自适应，两边内容宽度固定。

特别注意的是查找了许多资料发现竟然几乎没有资料提到过这两个模型的高度问题，即使是网上给的代码也几乎没有实现高度自适应的问题，也许大家都觉得太简单甚至不值一提，但是我却为此纠结了很久，所以下面我也会提到如何实现高度自适应。

两者的区别我总结为三点：

1、DOM结构不同，相对于圣杯，双飞翼为中间内容单独加了一个容器以便margin来为左右留出空白；

2、圣杯用padding来为左右留白，双飞翼用margin；

3、圣杯要结合浮动和定位来使左右定位，双飞翼只用浮动即可。

下面分开讲解圣杯和双飞翼的实现：

圣杯模型：

圣杯最早的文章详见：点击打开链接，这篇文章十分详细地介绍了圣杯布局的实现步骤，以及各个步骤的作用。

DOM结构：

                <div class="head">head<br/></div>
		<div class="main">
			<div class="middle">middle</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div class="footer">footer</div>

CSS：

                      *{
				margin: 0;
				padding: 0;
			}
		 body{
				min-width: 600px;
			}
		.head,.footer{
	        	width: 100%;
	          	height: 50px;
	        	text-align: center;
	        	line-height: 50px;
	        	background-color: #A9A9A9;
	             }
	          .left,.middle,.right{
	        	float: left;
	        	position: relative;
	        	min-height: 200px;
	         	margin-bottom: -2000px;