聖盃佈局和雙飛翼佈局

ps: 參考文章 DotHide同窗的「關於聖盃佈局」， 聖盃佈局和雙飛翼佈局的區別

經典佈局

聖盃佈局

<div id="header">#header</div>

  <div id="container">
    <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>

實現的效果主要在container中，left 和 rgith固定寬度，center首先渲染，且自適應寬度。

body {
      min-width: 500px;
    }
    #container {
      overflow: auto;        /* BFC */
      padding-left: 180px;
      padding-right: 150px;
    }
    #container .column {
      height: 200px;
      position: relative;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #left {
      background-color: red;
      width: 180px;
      right: 180px; 
      margin-left: -100%
    }
    #right {
      background-color: blue;
      width: 150px; 
      margin-right: -150px;
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }

該方案几個注意的點：

1. center元素位於left和right以前，能夠讓center先渲染，用戶首先看到頁面的主要內容。
2. container （width:100%）包裹着三欄內容，經過padding-left和padding-right爲左右兩欄騰出空間。
3. center，left，right都設置一個左浮動（float:left），因此container內部是一個浮動流。
4. 經過給 left 元素設置 margin-left: -100%，使得left移動到container的左上角，在經過position：relative； right: 180px，移動到container的padding-left的位置上去。
5. 給right 元素設置 margin-right: -150px，使得它移動到container的padding-right的位置上去。

ps: margin-left 和 margin-right 利用了浮動流的特性，使得第一行可以同時容納center，left，right這三個元素。

聖盃佈局（flexbox實現）

<div id="HolyGrail">
  <div id="header">#header</div>

  <div id="container">
    <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 {
      min-width: 550px;  
    }
    #HolyGrail {
      display: flex;
      min-height: 100vh;
      flex-direction: column;
    }
    #container {
      display: flex;
      flex: 1;
    }
    #center {
      background-color: #e9e9e9;
      flex: 1;
    }
    #left {
      background-color: red;
      order: -1;
      width: 150px;
    }
    #right {
      background-color: blue;
      width: 150px;
    }
    #header, 
    #footer {
      height: 50px;
      background-color: #c9c9c9;
    }

若是不考慮ie10及如下的瀏覽器，那麼能夠使用flex來實現聖盃佈局。並且聖盃佈局能夠經過讓container填充高度來使得footer達到一個sticky的效果。
flex兼容性

雙飛翼佈局

聖盃佈局和雙飛翼佈局解決的問題是同樣的，就是兩邊定寬，中間自適應的三欄佈局，中間欄要在放在文檔流前面以優先渲染。聖盃佈局和雙飛翼佈局解決問題的方案在前一半是相同的，也就是三欄所有float浮動，但左右兩欄加上負margin讓其跟中間欄div並排，以造成三欄佈局。不一樣的地方在於解決中間div內容不被遮擋的思路上面

1. 聖盃佈局的爲了中間內容不被修改，是經過包裹元素的padding-left和padding-right來使得內容div置於中間，而後再經過相對定位position:relative，配合right或left屬性讓左右兩欄不則當中間內容。
2. 雙飛翼佈局的解決方案是：經過再中間元素的內部新增一個div用於放置內容，而後經過左右外邊距margin-left和margin-right爲左右兩欄留出位置。
3. 雙飛翼佈局多了1個div標籤，少用了4個css屬性。少用了padding-left，padding-right，左右兩個div用相對佈局position: relative及對應的right和left，多了margin-left，margin-right。

<div id="header">#header</div>

  <div id="container">
    <div id="center" class="column">
      <div id="center-content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>

  <div id="footer">#footer</div>

body {
      min-width: 500px;  
    }
    #container {
      overflow: auto;        /* BFC */
    }
    #container .column {
      height: 200px;
      float: left;
    }
    #center {
      background-color: #e9e9e9;
      width: 100%;
    }
    #center-content {
      margin-left: 180px;
      margin-right: 150px;
    } 
    #left {
      width: 180px;
      background-color: red;
      margin-left: -100%;
    }
    #right {
      background-color: blue;
      width: 150px;  
      margin-left: -150px; 
    }

    #header, 
    #footer {
      background-color: #c9c9c9;
    }