JavaScript圣杯布局与双飞翼布局实现案例详解
作者：闭包旅人时间：2026-10-25 17:34:51浏览：215
本文详解圣杯布局与双飞翼布局的实现原理，两者均用于实现两侧固定、中间自适应的三栏布局。圣杯布局通过padding预留空间并配合相对定位实现，双飞翼布局则在中间容器内嵌套子元素利用margin调整。文章对比了两种布局的代码结构差异及核心思路，并解答常见面试题，帮助开发者深入理解CSS布局技巧。
一、圣杯布局和双飞翼布局的功能介绍
- 圣杯布局和双飞翼布局属于三栏布局的两种具体实现方案，它们最终呈现的视觉效果一致，主要区别在于实现手段不同。
- 页面顶部的header和底部的footer占据屏幕全宽，且高度固定。
- 中间的outer区域采用三栏布局结构。
- 在三栏结构中，左侧left和右侧right宽度固定不变，中间center区域自动填充剩余空间。
- 中间部分的高度由三栏中最高的区域决定。
二、圣杯布局
高度如何自适应屏幕高度
- 这并非圣杯布局的强制要求，因为圣杯布局允许指定具体高度，但这可以作为一种延伸思考。
- 实现方法是采用flex布局，将主轴方向设置为纵轴（column），并将outer容器的flex属性设为1，使其填充多余空白，从而实现自适应屏幕高度的效果。
body{
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.header{
background-color:grey;
height: 50px;
}
.footer{
background-color:grey;
height: 50px;
}
.outer{
flex:1;
}圣杯布局思路
- 将center盒子置于HTML结构的最前面，确保其优先渲染。
- 为outer盒子设置padding-left和padding-right属性，分别为left和right区域预留空间。
- 三个盒子均设置float:left，此时left和right会被挤到下一行。
- 对left设置margin-left:-100%并配合相对定位left:-left的宽度；对right设置margin-left=-right的宽度并配合相对定位right:-right的宽度，从而将两个侧边盒子归位。
圣杯布局代码
<style>
* {
padding: 0;
margin: 0;
text-align: center;
}
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;;
}
.header{
width: 100%;
height: 50px;
background-color:dimgray;
}
.footer{
width: 100%;
height: 50px;
background-color:dimgray;
}
.outer{
flex:1;
padding-left: 100px;
padding-right: 200px;
}
.center{
float: left;
background-color: darkslateblue;
height: 100%;
width: 100%;
}
.left{
float: left;
width: 100px;
margin-left: -100%;
background-color: burlywood;
height: 100%;
position: relative;
left: -100px;
}
.right{
float: left;
width: 200px;
margin-left: -200px;
height: 100%;
position: relative;
right: -200px;
background-color: cyan;
}
</style>
<body>
<div class="header">header</div>
<div class="outer">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>三、双飞翼布局
双飞翼布局的思路
- 将三个盒子均设置为左浮动。
- 将center的宽度设为100%。
- left设置margin-left:-100%；right设置margin-left=-right的宽度即可将两个盒子归位，但这会遮挡center的两端。
- 在center盒子内部再添加一个content盒子，设置margin-left和margin-right为两侧盒子的宽度，由content盒子承载内容。
双飞翼布局的代码
<style>
*{
padding: 0;
margin: 0;
}
html{
width: 100%;
height: 100%;
text-align: center;
}
body{
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}
.header{
background-color:grey;
height: 50px;
}
.footer{
background-color:grey;
height: 50px;
}
.outer{
flex:1;
}
.center{
float: left;
width: 100%;
background-color: darkslateblue;
height: 100%;
}
.left{
float: left;
margin-left: -100%;
width: 100px;
background-color: burlywood;
height: 100%;
}
.right{
float: left;
width: 200px;
background-color: cyan;
margin-left: -200px;
height: 100%;
}
.content{
margin-left: 100px;
margin-right: 200px;
height: 100%;
}
</style>
<body>
<div class="header">header</div>
<div class="outer">
<div class="center">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>圣杯布局和双飞翼布局的区别
- 圣杯布局利用padding将中间部分留出，再利用定位、margin的方式将左右盒子归位，因此不需要外层div。
- 双飞翼布局先设置中间盒子的宽度为100%，再用margin移动左右盒子覆盖了中间盒子的两侧，再将outer中间加入一个盒子，留出两侧的margin值，达到三栏布局的效果。
四、圣杯布局和双飞翼布局面试问题
回答：圣杯布局和双飞翼布局都可以实现三栏布局，即两侧宽度固定，中间自适应的效果。圣杯布局是先用padding将中间内容留出，再定位左右盒子到相应位置；而双飞翼布局首先将中间盒子的宽度设为了100%，在定位左右盒子的时候会覆盖中间盒子的两端，这样就需要在中间盒子中在定义一个盒子，并留出margin的两侧值。两种布局都需要把center盒子写在left和right前面，为了最先渲染。
到此这篇关于JavaScript圣杯布局与双飞翼布局实现案例详解的文章就介绍到这了,更多相关JS圣杯布局与双飞翼布局内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
作者最新文章
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38