CSS布局：三栏布局

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

一、圣杯布局

<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定位将左右两栏调整到合适位置。

效果图:

二、双飞翼布局

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属性并利用块状元素水平方向的流动性自适应中间剩余宽度。
效果图：

三、总结

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