圣杯布局 vs 双飞翼布局

圣杯布局 vs 双飞翼布局

双飞翼布局要求
header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

双飞翼布局的实现
left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度
 

 

<div class="main clearfix">
    双飞翼--整体一个父容器中间部分单独一个父容器左右边距留出左右位置布局
   <div class="middle">
        <div class="content">中间middle-content</div>
   </div>
   <div class="left">左边left</div>
   <div class="right">右边right</div>
</div>
<div style="height: 90px"></div>
<div class="box">
     圣杯布局 利用父容器左右边距，两侧相对定位
    <div class="middle">中间middle中间middle</div>
    <div class="left">左边left</div>
    <div class="right">右边right</div>
</div>

.main {
  background: #fbb0a5;
  & > div {
    float: left;
  }
  .left {
    width: 200px;
    background: red;
    margin-left: -100%;
    height: 100px;
  }
  .right {
    width: 200px;
    background: blue;
    margin-left: -200px;
    height: 160px;
  }
  .middle {
    width: 100%;
    background: yellow;
    height: 60px;
  }
  .content {
    margin-left: 200px;
    margin-right: 200px;
  }
}

.box {
  height: 200px;
  padding: 0 150px 0 200px;
  background: greenyellow;
  *zoom: 1;
  .left,
  .middle,
  .right {
    float: left;
  }
  .middle {
    width: 100%;
    height: 100px;
    background: red;
  }
  .left {
    width: 200px;
    height: 160px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
  }
  .right {
    width: 150px;
    height: 220px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
  }
}

相同点：

1.两个都是三栏式布局，中间栏优先放，保证优先渲染

2.实现方式都是左浮动

不同点：

1圣杯布局是中间栏为两边腾开位置。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置