前言

最近我朋友在群里发了一张图，说为什么main的宽度100%了，sub还是可以覆盖它呢？看来是时候带他回忆一波经典的圣杯布局和双飞翼布局了。正好最近看到好多面试题都有提到。 /笑哭

群内链接如下图：

1.png

字面意思

圣呗布局和双飞翼布局从字面意思来看是这样的：

一个像圣杯或者像展翅的禽类这样的布局

通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

两者本质

2.png

圣杯布局

  1. 首先把left、middle、right都放出来
  2. 给它们三个设置上float: left, 脱离文档流；
  3. 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
  4. left、right设置上各自的宽度
  5. middle设置width: 100%;

接下来比较重要了：

  1. 给left、middle、right设置position: relative;
  2. left设置 left: -leftWidth, right设置 right: -rightWidth;
  3. container设置padding: 0, rightWidth, 0, leftWidth;

—

我注意到圣杯布局的left、middle、right都有position: relative;

设:

  1. .left width:200px
  2. .right width:220px

那么下面的这些属性为什么要存在？

  1. .container上面的paddind
  2. .left 的left: -200px;
  3. .right 的right: -220px;

因为不这样设置 会遮挡middle的内容

可以自己尝试一下下

—

圣杯布局示例代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>圣杯布局</title>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  15.     .header,
  16.     .footer {
  17.       height: 100px;
  18.       line-height: 100px;
  19.       background-color: green;
  20.       text-align: center;
  21.       font-size: 30px;
  22.       font-weight: bolder;
  23.     }
  25.     .footer {
  26.       background-color: goldenrod;
  27.     }
  29.     .container {
  30.       padding: 0 220px 0 200px;
  31.       overflow: hidden;
  32.     }
  34.     .left,
  35.     .middle,
  36.     .right {
  37.       position: relative;
  38.       float: left;
  39.       min-height: 130px;
  40.       word-break: break-all;
  41.     }
  43.     .left {
  44.       margin-left: -100%;
  45.       left: -200px;
  46.       width: 200px;
  47.       background-color: red;
  48.     }
  50.     .right {
  51.       margin-left: -220px;
  52.       right: -220px;
  53.       width: 220px;
  54.       background-color: green;
  55.     }
  57.     .middle {
  58.       width: 100%;
  59.       background-color: blue;
  60.     }
  61.   </style>
  62. </head>
  64. <body>
  65.   <div class="header">header</div>
  66.   <div class="container">
  67.     <div class="middle">
  68.       <h4>middle</h4>
  69.       <p>
  70.         middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  71.         middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  72.         middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  73.         middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  74.         middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  75.         middlemiddlemiddlemiddlemiddle
  76.       </p>
  77.     </div>
  78.     <div class="left">
  79.       <h4>left</h4>
  80.       <p>
  81.         leftleftleftleftleftleftleftleftleftleftleftleft
  82.         leftleftleftleftleftleftleftleftleftleftleftleft
  83.         leftleftleftleftleftleftleftleftleftleftleftleft
  84.       </p>
  85.     </div>
  86.     <div class="right">
  87.       <h4>right</h4>
  88.       <p>
  89.         rightrightrightrightrightrightrightrightrightright
  90.         rightrightrightrightrightrightrightrightrightright
  91.         rightrightrightrightrightrightright
  92.       </p>
  93.     </div>
  94.   </div>
  95.   <div class="footer">footer</div>
  96. </body>
  98. </html>

—

双飞翼布局

双飞翼布局和圣杯布局很类似，不过是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

这样可以先做好主体部分，然后再将附属部分放到合适的位置！

  1. 首先把left、middle、right都放出来, middle中增加inner
  2. 给它们三个设置上float: left, 脱离文档流；
  3. 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
  4. left、right设置上各自的宽度
  5. middle设置width: 100%;

接下来与圣杯布局不一样的地方：

  1. left设置 margin-left: -100%, right设置 right: -rightWidth;
  2. container设置padding: 0, rightWidth, 0, leftWidth;
  1. <!DOCTYPE html>
  2. <html lang="zh">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>双飞翼布局</title>
  9.   <style>
  10.     * {
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  15.     .header,
  16.     .footer {
  17.       height: 100px;
  18.       line-height: 100px;
  19.       background-color: green;
  20.       text-align: center;
  21.       font-size: 30px;
  22.       font-weight: bolder;
  23.     }
  25.     .footer {
  26.       background-color: goldenrod;
  27.     }
  29.     .container {
  30.       overflow: hidden;
  31.     }
  33.     .left,
  34.     .middle,
  35.     .right {
  36.       float: left;
  37.       min-height: 130px;
  38.       word-break: break-all;
  39.     }
  41.     .left {
  42.       margin-left: -100%;
  43.       width: 200px;
  44.       background-color: red;
  45.     }
  47.     .right {
  48.       margin-left: -220px;
  49.       width: 220px;
  50.       background-color: green;
  51.     }
  53.     .middle {
  54.       width: 100%;
  55.       height: 100%;
  56.       background-color: blue;
  57.     }
  59.     .inner {
  60.       margin: 0 220px 0 200px;
  61.       min-height: 130px;
  62.       background: blue;
  63.       word-break: break-all;
  64.     }
  65.   </style>
  66. </head>
  68. <body>
  69.   <div class="header">header</div>
  70.   <div class="container">
  71.     <div class="middle">
  72.       <div class="inner">
  73.         <h4>middle</h4>
  74.         <p>
  75.           middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  76.           middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  77.           middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  78.           middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  79.           middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
  80.           middlemiddlemiddlemiddlemiddle
  81.         </p>
  82.       </div>
  83.     </div>
  84.     <div class="left">
  85.       <h4>left</h4>
  86.       <p>
  87.         leftleftleftleftleftleftleftleftleftleftleftleft
  88.         leftleftleftleftleftleftleftleftleftleftleftleft
  89.         leftleftleftleftleftleftleftleftleftleftleftleft
  90.       </p>
  91.     </div>
  92.     <div class="right">
  93.       <h4>right</h4>
  94.       <p>
  95.         rightrightrightrightrightrightrightrightrightright
  96.         rightrightrightrightrightrightrightrightrightright
  97.         rightrightrightrightrightrightright
  98.       </p>
  99.     </div>
  100.   </div>
  101.   <div class="footer">footer</div>
  102. </body>
  104. </html>

总结

圣杯布局在DOM结构上显得更加直观和自然；

双飞翼布局省去了很多css，而且由于不用使用定位，可以获得比圣杯布局更小最小宽度；

说到这里需要注意一下 由于双飞翼布局会一直随着浏览器可视区域宽度减小从而不断挤压中间部分宽度。

所以需要设置给页面一个min-width > LeftWidth + RightWidth；

—

还有一件事就是他们在单独部分内容扩充的时候，童鞋们可能发现了 底部会参差不齐。

在我的老师那里知道了最简单的解决办法 / 笑哭

给left、middle、right设置上 padding-bottom: 9999px; margin-bottom: -9999px;

就让他变得无限高，但是又给他送回去了。真的是让我脑洞大开！！！

demo地址

圣杯布局

双飞翼布局