CSS三栏布局：圣杯布局、双飞翼布局

爱被打了一巴掌 2022-01-17 11:07 334阅读 0赞

其实三栏布局比较简单，而且方法也有很多。今天了解了一下传统的三栏布局方法：圣杯布局、双飞翼布局，本文简单记录一下。  
所谓三栏布局，通常是指左右两栏定宽，中间一栏自适应页面宽度填满剩余空间的布局。

## 一、圣杯布局 ##

<div class="header">这是页头</div>
    <div class="container">
      <div class="center">center</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="footer">这是页脚</div>

这里有一点细节：主要内容部分，即中间栏dom放在了左右两栏dom之前，在dom树渲染的时候会被优先渲染。

div { 
      text-align: center
    }
    
    .header, .footer { 
      background: #FFEFC0;
      line-height: 100px;
    }
    
    .container { 
      overflow: hidden;
      margin: 0 auto;
      background: #78A4FA;
      padding: 0 100px;
    }
    
    .center, .left, .right { 
      float: left;
      min-height: 100px;
    }
    
    .left, .right { 
      width: 100px;
      background: #5ADD94;
      position: relative;
    }
    .left { 
      margin-left: -100%;
      left: -100px;
    }
    .right { 
      margin-left: -100px;
      right: -100px;
    }
    .center { 
      width: 100%;
      border: 1px solid #FFA710;
      box-sizing: border-box;
    }

圣杯布局的原理是：  
container设置了padding之后浮动子元素的宽度计算100%是相对于container的宽度- paddingLeft - paddingRight，同时利用relative定位将左右两栏调整到合适位置。

效果图:  
![image.png][]

## 二、双飞翼布局 ##

dom结构与圣杯布局类似：

<div class="header">这是页头</div>
    <div class="container">
      <div class="center">
        <div class="main-content">
          center
        </div>
      </div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <div class="footer">这是页脚</div>

div { 
      text-align: center
    }
    
    .header, .footer { 
      background: #FFEFC0;
      line-height: 100px;
    }
    
    .container { 
      overflow: hidden;
      margin: 0 auto;
      background: #78A4FA;
    }
    
    .center, .left, .right { 
      float: left;
      min-height: 100px;
    }
    
    .left, .right { 
      width: 100px;
      background: #5ADD94;
    }
    .left { 
      margin-left: -100%;
    }
    .right { 
      margin-left: -100px;
    }
    .center { 
      width: 100%;
    }
    .main-content { 
      min-height: 100px;
      margin: 0 100px;
      border: 1px solid #FFA710;
      box-sizing: border-box;
    }

原理与圣杯布局略微不同之处在于，圣杯布局利用container设置padding的方法限制中间栏宽度，而双飞翼布局则在中间栏新加了一层dom，通过设置该dom的margin属性并利用块状元素水平方向的流动性自适应中间剩余宽度。  
效果图：  
![image.png][image.png 1]

## 三、总结 ##

本文仅仅是对经典布局的一个简单记录，其实实现三栏布局还有很多其它的方法，比如flex布局、利用calc函数。

[image.png]: /images/20220117/f06835ad0a1a43798bd31de0d8517372.png
[image.png 1]: /images/20220117/7723f83acbfa40be818a5c1e5a222a95.png