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

最新推荐文章于 2023-08-02 21:30:00 发布

PethZhang

最新推荐文章于 2023-08-02 21:30:00 发布

阅读量2.2k

点赞数

分类专栏：笔记和案例文章标签：前端布局 dom 结构

本文链接：https://blog.csdn.net/PethZhang/article/details/78319151

版权

本文介绍了圣杯模型和双飞翼模型在三列布局中的应用，重点讨论了这两者如何实现高度自适应。区别在于DOM结构、留白方式和定位方法。圣杯模型依赖定位和浮动，而双飞翼模型仅使用浮动。通过设置overflow、margin和padding，可以解决高度不一致问题，确保内容区域与侧边栏保持相同高度。

摘要由CSDN通过智能技术生成

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

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

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

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;