双飞翼布局和圣杯布局

最新推荐文章于 2025-09-11 23:01:16 发布

原创最新推荐文章于 2025-09-11 23:01:16 发布 · 361 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

本文介绍了前端布局中两种常见的复杂布局模式——圣杯布局和双飞翼布局。这两种布局旨在实现页面头部和底部固定，中间内容区域随浏览器窗口尺寸变化而自适应，同时保持两侧栏的固定宽度。圣杯布局通过父元素的padding和子元素相对定位实现，而双飞翼布局则利用内部容器的margin扩展边界。文章提供了详细的代码示例，帮助读者理解两种布局的工作原理和区别。

一、两种布局的目的：

使得左右两边的宽度不随着浏览器窗口的变化而变化，是固定的，只有中间的部分才可以随着窗口变化而变化。如图：

二、两种布局的区别：

圣杯布局是通过父元素padding来设置左右，不遮挡中间内容

双飞翼布局时通过设置margin来限制内部区域从而是中间内容不受影响

圣杯布局代码：

<body>
<!--圣杯布局重点结构就是中间的部分 顺序是center排在最前面 方面后面调整left right位置
 因为left right都排在center后面 这样很容易调整上去 如果left right排在center前面 很难调整位置
--> 
		<div id="header">header</div>
		    <div id="container" class="clearfix">
		      <div id="center" class="column">center</div>
		      <div id="left" class="column">left</div>
		      <div id="right" class="column">right</div>
		    </div>
		    <div id="footer">footer</div>
</body>

<style>
	#container{
		padding-left: 200px;
		padding-right: 190px;
		
		margin: auto;
	}
	#center{
		width: 100%;
		background-color: aqua;
	}
	.column{
		float: left;
	}
	#left{
		width: 200px;
		background-color: bisque;
		margin-left: -100%;
		position: relative;
		left: -200px;
	}
	#right{
		width: 190px;
		background-color: coral;
		margin-right: -190px;
	}
	#header,#footer{
		width: 100%;
		margin: auto;
		background-color: darkgray;
		text-align: center;
	}
	.clearfix::after{
		 display: table;
		content: "";
		clear: both;
	}
	</style>

双飞翼代码：

<body>
		<div id="header">header</div>
		<div id="center" class="column">
			<div id="center-warp">
				center
			</div>
		</div>
		<div id="left" class="column">left</div>
		<div id="right" class="column">right</div>
		<div id="footer">footer</div>
</body>

<style>
#container{
		padding-left: 200px;
		padding-right: 190px;
		
		margin: auto;
	}
	#center{
		width: 100%;
		height: 200px;
		background-color: aqua;
	}
	.column{
		float: left;
		text-align: center;
	}
	#center-warp{
		/*用margin隐性的扩展自己的边界*/
		      margin :0 190px 0 200px;

	}
	#left{
		width: 200px;
		height: 200px;
		background-color: bisque;
		margin-left: -100%;
	}
	#right{
		width: 190px;
		height: 200px;
		background-color: coral;
		margin-left: -190px;
	}
	#header,#footer{
		width: 100%;
		margin: auto;
		background-color: darkgray;
		text-align: center;
	}
</style>