CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果，而不喜欢说其是问题)并不陌生，而且很多同学都似乎有碰到过，也经常体验过。甚至在很多前端面试中也常被考官问到，有的时候还直接被考官给秒杀了。

针对这几个效果，W3cplus上都对应的有这方面的教程：

• 水平垂直居中系列
• 八种创建等高列布局
• 如何将页脚固定在页面底部

既然都有相关的教程，为何还费那么多劲再次扯蛋，难道真的闲得蛋疼了吗？其实并不如此，随着技术的更新，我们很多思路也得跟着创新，不能固定自封。那么今天我想从一些新的角度来考虑如何实现这几种效果。

等高列布局

在《八种创建等高列布局》一文中详细介绍了八种创建等高列布局的不同方法。可以说这些方法足以满足你的业务需求，当然其中有一些方法略为繁琐，也有时转得人头晕。在今天这种技术环境之下，如果的业务对IE低版本依赖性不是非常强的情况之下，可以考虑一些新的方法来实现。接下来我与大家一起探讨几种新方法实现等高列布局。

Flexbox方式

Flexbox是一个强大而又神奇的CSS3模块，而且到现在，也得到众开浏览器的支持。有了这个模块，可以帮助我们做很多事情，而且较之以前的方案要更简单，唯一蛋疼的是在一些老版本浏览器中无法得到友好支持。接下来的内容，我们也将忽略这个兼容问题，而只是针对性的探讨如何使用Flexbox实现等高列布局。

Flexbox如何使用，在这里就不深入了，如果您是第一次接触Flexbox，那么我建议您猛击这里先了解其使用方法。

HTML

来个简单点的，两列布局是Web布局中常见的一种，其结构大致都是像这样：

<div id="header">
    <div class="container">Header ...</div>
</div>

<div id="page">
    <div class="container">
        <div class="aside">Sidebar ...</div>
        <div class="content">Main content ...</div>
    </div>
</div>

<div id="footer">
    <div class="container">Footer ....</div>
</div>

非常常见的两列布局。接下来才是关键，使用Flexbox实现侧栏.aside和主内容.contetn实现等高效果。

CSS

为了更好的看出效果，我们先给整个布局添加一些基本样式：

* {
  margin: 0;
  padding:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}
.container {
  width: 960px;
  margin: 0 auto;
  color: #fff;
}

#header .container {
  background-color: #f36;
  min-height: 50px;
  padding: 20px;
  margin-bottom: 10px;
}

#page .container {
  background-color: #cef;
  min-height: 300px;
  margin-bottom: 10px;
}

.aside {
  width: 220px;
  background-color: #36e;
  padding: 5px 15px;
}
.content {
  background-color: #66f;
  padding: 5px 15px;
}
#footer .container {
  background-color: #f36;
  padding: 20px;
}

此时你将看到的效果是这样的:demo

这样的结局不是大家想看到的，来点精彩的，在上面代码基础上添加Flexbox功能：

#page .container {
  background-color: #cef;
  min-height: 300px;
  margin-bottom: 10px;

  display: flex;
}

.aside {
  width: 220px;
  background-color: #36e;
  padding: 5px 15px;
  margin-right: 20px;
}
.content {
  background-color: #66f;
  padding: 5px 15px;

  flex: 1;
}

从上面代码可以看出，在两列容器#page .container上添加了display:flex，在.content添加了自适应flex:1样式，为了让两列之间有一个间距，在.aside上添加了margin-right: 20px;。就这么几行代码，轻松实现了等高列布局。

特别声明：请使用Chrome浏览器访问DEMO，如果需要兼容更多浏览器效果，请参考《一个完整的Flexbox指南》一文，添加对应的兼容代码。

渐变方式

等高列布局，有一种简单的方法就是根据列宽和其背景色制作一张背景图，然后在Y轴方向重铺。但这种方式在改变宽度和背景颜色的时候就非常的麻烦。那么根据背景图的思路，我们可以考虑使用CSS3的渐变属性来制作类似于这样的一张背景图。

渐变Gradient是CSS3中新增的一个功能，如果你还未接触过，建议通过《CSS3 Gradient》、《再说CSS3渐变——线性渐变》和《再说CSS3渐变——径向渐变》了解CSS3的gradient的应用。

这时假设你已经对Gradient有一定的了解，接下来我们主要要探讨的是如何使用Gradient模拟出使用背景图制作的等高布局。

假设我们的两列布局，左侧是220px,主内容是720px，两者间距是20px(容器宽度是960px)。我们需要一个类似于下面的背景图：

那么使用Gradient实现类似一张这样的背景，我们需要采用多色渐变，如示例中所示，总共使用了三个颜色：