css中聖杯佈局和雙飛翼佈局的介紹（附代碼）

<div>#header</div>

  <div>
    <div>#center</div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#footer</div>

    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;
    }

  <div>#header</div>

  <div>
    <div>#center</div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#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讓其跟中間欄p並排，以形成三欄佈局。 不同的地方在於解決中間p內容不被遮蔽的思路上面

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

<div>#header</div>

  <div>
    <div>
      <div>#center</div>
    </div>
    <div>#left</div>
    <div>#right</div>
  </div>

  <div>#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;
    }
登入後複製
相關文章推薦：
css中如何實現浮動的元素換行
CSS中Grid佈局的用法總結(附程式碼)