本文介绍了通过css实现双飞翼布局的四种方法(带代码)。 可以作为参考，需要的人请参考。 希望能帮上忙。
圣杯布局，双飞翼布局效果图
从效果图来看圣杯布局，双飞翼布局的效果是一样的。
圣杯布局、双飞翼布局左右两侧宽度固定，中间内容宽度适应，100%
圣杯的安排
*{
margin: 0；
padding: 0；
盒尺寸： border-box；
}
. clearfix:before、
. clearfix:after{
显示：表；
内容： '；
clear: both；
}
. container{
padding: 0 200px；
}
. header，
. footer{
高： 200 px；
font-size: 28px；
背景色： # f3f3f 3；
}
. left{
position: relative；
/* 2、 left请再向左转一次。 否则， main的左侧将出现200px的空白*/
left: -200px；
浮点：左；
width: 200px；
最小-高： 300 px；
/* 1、将. left拉到最左边， left掉了下来*/
玛格琳- left :-100 %；
背景色： # f00；
}
. main{
浮点：左；
width: 100%；
最小-高： 300 px；
背景色： # c 32228；
}
. right{
position: relative；
/* 2，请再向右拉一次. right。 否则， main的右侧将出现200px的空白*/
right: -200px；
浮点：左；
width: 200px；
//1，把. right拉到最右边， right掉了下来(/
玛格琳- left :-200 px；
最小-高： 300 px；
背景色： # f90；
}
基于header main left right footer浮动的双翼布局
*{
margin: 0；
padding: 0；
盒尺寸： border-box；
}
. clearfix:before、
. clearfix:after{
显示：表；
内容： '；
clear: both；
}
. header，
. footer{
高： 200 px；
font-size: 28px；
背景色： # f3f3f 3；
}
. left{
浮点：左；
width: 200px；
最小-高： 300 px；
/*.left拉到最左边， left掉了下来*/
margin-left: -100%；
背景色： # f00；
}
. main{
浮点：左；
width: 100%；
最小-高： 300 px；
/* .left、 right各占200px，需要将其抵消*/
padding: 0 200px；
背景色： # c 32228；
}
. right{
浮点：左；
width: 200px；
/* .把right拉到最右边， right掉了下来*/
玛格琳- left :-200 px；
最小-高： 300 px；
背景色： # f90；
}
headermainleftrightfootertable -基于蜂窝的双飞翼布局(也与IE8兼容哦~
*{
margin: 0；
padding: 0；
盒尺寸： border-box；
}
. container{
显示：表；
}
. header，
. footer{
高： 200 px；
font-size: 28px；
背景色： # f3f3f 3；
}
. left，
. right
. main{
/*外部容器使用table-cell布局，如果将元素设置为table-cell布局，则在一行中显示。 display :表蜂窝； 设定无效的宽度，
因此，他们的幅度因内容而扩大。 */
display :表蜂窝；
}
. left-inner{
width: 200px；
最小-高： 300 px；
背景色： # f00；
}
. main{
width: 100%；
}
. main-inner{
最小-高： 300 px；
背景色： # c 32228；
}
. right-inner{
width: 200px；
最小-高： 300 px；
背景色： # f90；
}
基于header left main right footer绝对定位的双层飞翼布局
绝对定位的实现有一个小问题。 父容器的高度仅由. main的高度决定
*{
margin: 0；
padding: 0；
盒尺寸： border-box；
}
. container{
position: relative；
padding: 0 200px；
}
. header，
. footer{
高： 200 px；
font-size: 28px；
背景色： # f3f3f 3；
}
. left{
位置： absolute；
top: 0；
left: 0；
width: 200px；
最小-高： 300 px；
背景色： # f00；
}
. main{
最小-高： 300 px；
背景色： # c 32228；
}
. right{
位置： absolute；
top: 0；
right: 0；
width: 200px；
最小-高： 300 px；
背景色： # f90；
}
header left mian right footer使用flex实现双重飞行布局。 (存在兼容性问题。 ）
*{
margin: 0；
padding: 0；
盒尺寸： border-box；
}
. clearfix:before、
. clearfix:after{
显示：表；
内容： '；
clear: both；
}
. container{
显示： Flex；
}
. header，
. footer{
高： 200 px；
font-size: 28px；
背景色： # f3f3f 3；
}
. left{
flex: 0 0 200px；
width: 200px；
最小-高： 300 px；
背景色： # f00；
}
. main{
flex: 1；
width: 100%；
最小-高： 300 px；
背景色： # c 32228；
}
. right{
flex: 0 0 200px；
width: 200px；
最小-高： 300 px；
背景色： # f90；
}
header left main right footer推荐：
双飞翼布局是什么？ 共享双飞翼布局的实例代码
CSS布局圣杯布局双飞翼布局_html/css_WEB-ITnose