CSS中的等高布局、水平垂直居中以及置顶页脚(Sticky Footer)这几个效果(我喜欢把他们说成是CSS效果，而不喜欢说其是问题)并不陌生，而且很多同学都似乎有碰到过，也经常体验过。甚至在很多前端面试中也常被考官问到，有的时候还直接被考官给秒杀了。
针对这几个效果，W3cplus上都对应的有这方面的教程：
-
水平垂直居中系列
-
八种创建等高列布局
-
如何将页脚固定在页面底部
既然都有相关的教程，为何还费那么多劲再次扯蛋，难道真的闲得蛋疼了吗？其实并不如此，随着技术的更新，我们很多思路也得跟着创新，不能固定自封。那么今天我想从一些新的角度来考虑如何实现这几种效果。
等高列布局
在《八种创建等高列布局》一文中详细介绍了八种创建等高列布局的不同方法。可以说这些方法足以满足你的业务需求，当然其中有一些方法略为繁琐，也有时转得人头晕。在今天这种技术环境之下，如果的业务对IE低版本依赖性不是非常强的情况之下，可以考虑一些新的方法来实现。接下来我与大家一起探讨几种新方法实现等高列布局。
Flexbox方式
Flexbox是一个强大而又神奇的CSS3模块，而且到现在，也得到众开浏览器的支持。有了这个模块，可以帮助我们做很多事情，而且较之以前的方案要更简单，唯一蛋疼的是在一些老版本浏览器中无法得到友好支持。接下来的内容，我们也将忽略这个兼容问题，而只是针对性的探讨如何使用Flexbox实现等高列布局。
Flexbox如何使用，在这里就不深入了，如果您是第一次接触Flexbox，那么我建议您猛击这里先了解其使用方法。
HTML
来个简单点的，两列布局是Web布局中常见的一种，其结构大致都是像这样：
非常常见的两列布局。接下来才是关键，使用Flexbox实现侧栏.aside和主内容.contetn实现等高效果。
CSS
为了更好的看出效果，我们先给整个布局添加一些基本样式：
此时你将看到的效果是这样的:
这样的结局不是大家想看到的，来点精彩的，在上面代码基础上添加Flexbox功能：
从上面代码可以看出，在两列容器#page .container上添加了display:flex，在.content添加了自适应flex:1样式，为了让两列之间有一个间距，在.aside上添加了margin-right: 20px;。就这么几行代码，轻松实现了等高列布局。
渐变方式
等高列布局，有一种简单的方法就是根据列宽和其背景色制作一张背景图，然后在Y轴方向重铺。但这种方式在改变宽度和背景颜色的时候就非常的麻烦。那么根据背景图的思路，我们可以考虑使用CSS3的渐变属性来制作类似于这样的一张背景图。
渐变Gradient是CSS3中新增的一个功能，如果你还未接触过，建议通过《CSS3 Gradient》、《再说CSS3渐变——线性渐变》和《再说CSS3渐变——径向渐变》了解CSS3的gradient的应用。
这时假设你已经对Gradient有一定的了解，接下来我们主要要探讨的是如何使用Gradient模拟出使用背景图制作的等高布局。
假设我们的两列布局，左侧是220px,主内容是720px，两者间距是20px(容器宽度是960px)。我们需要一个类似于下面的背景图：
那么使用Gradient实现类似一张这样的背景，我们需要采用多色渐变，如示例中所示，总共使用了三个颜色：
-
左侧色为
#f36，从０点起到220px止 -
间隔色为
#fff，从221px起到240px止 -
主内容色为
#f63，从241px起到100%止
如下图所示：
既然知道原理了，我们来看看如何实现。同样采用上例的结构，我们通过CSS3的线性渐变来实现两列等高布局：
效果DEMO所示：
到此，你是不是觉得非常的完美呀。说实在的，如果你不考虑低版本，这是完美的解决方案。那我们在此就是为了扩展思路吧，终有一天，你的等高布局能用上这种解决方案。而在此解决方案中最关键的是使用线性渐变：
至于是何原理，大家还是仔细搞懂渐变，一旦你搞懂渐变，这个对你来说就是小菜一碟。
伪类方式
CSS伪类:before和:after或者CSS伪元素::before和::after在实际中可以帮助我们做很多事情。
有关于:before和:after相关教程可以阅读《学习使用：before和：after伪元素》。
在这篇文章中，我们同样可以使用伪类来实现等高列布局。这个思路主要来自于Kezz Bracey写的一篇文章《Quick Tip: Solving the Equal Height Column Conundrum》。就拿这篇博文中的示例来说，先来看几张从文中搬来的图片，这几张图能帮助大家解惑，伪类是如何实现等高列布局：
上图主要说明.wrap容器中包含三个子元素和其他们对应的伪类。通过伪类设置背景色。使用这种方法有几个关键点：
-
容器
.wrap需要设置position:relative； -
伪类
:before或:after需要绝对定位，不同元素的位置调整对应的left或者right值； -
背景颜色设置在伪类生成的内容上，并且通过
top和bottom拉伸，致使他们等高。 -
给伪类设置
z-index的值为-1，让其在内容底部。
根据上述，我们来实战一下。
HTML结构依照上例不动，我们来看CSS的实现方法：
看着一大串代码，是否有些晕，其实关键的就下面几行代码：
最后看看效果吧：
水平垂直居中
说起水平垂直居中大家常看到的是使用绝对定位与负margin的配合或者是inline-block配合vertical-align:middle等方法。当然还有其他一些解决方案，比如说，在水平垂直居中系列中介绍了一些制作方案。但这些方案或多或少都存在一些局限性。假设，要垂直水平居中的元素大小是未知的，你要使用绝对定位与负margin配合就难上加难。当然你会说，使用表格将解决我一切所需，的确是这样，那么除了这些方法，还有别的方案吗？接下来我们就针对这个自设问题，来一起探讨其他几种实现水平垂直居中的方案。
为了更好的阐述后面的方案，我们这里有一个命题：让未知大小容器（未知行数的文本）实现水平垂直居中。看到这样的命题，有人或许会说神经病又来了，如果你也这么认为，就让当是神病出现了吧。我们不纠结这个，还是看几种解决方案吧。
Flexbox方式
什么是Flexbox就不说了，对于让Flexbox实现水平垂直居中可以说是绝对的一流。假设我想让一张图片（图片大小不知）在body中实现水平垂直居中。
HTML
结构非常简单，body中有一张图片。
CSS
我们要做的是，如何使用Flexbox让img在body中实现水平垂直居中。
代码就这么几行，有一个关键之处，需要将html和body高度设置为100%;然后只需要在body中配置样式。此处使用了Flexbox中的居中属性。至于他们原理，这里就不多说了，感兴趣的同学可以看看Flexbox相关的教程。
transform与绝对定位方式
在当今天移动设备横行天下的年代，给我们前端人员制作页面带来无尽的烦恼，具体原因，大家都懂的。那么这里我们来模拟一个情形。有一个弹出层，我不知道他的大小有多大，我想让他在各种设备中永远水平居中。在下面示例中，我们用一个Dive来当作是弹出窗吧（偷懒了，不想花太多时间去做这个弹出窗效果）。
回到我们问题所在，在示例中有这样的一个结构：
结构不分析了。直接看CSS:
其实实现这个效果并不复杂，在这里我们就要借助了position和transform来实现，其关键代码：
我们不知道页面在什么屏幕下浏览，也未对弹出窗.modal设置过任何大小值（width和height）。而这神奇的效果是借助于绝对定位和负margin原理，只不过不同的是这里采用了CSS3的transform中的translate，来了个负负得正的玩法。有兴趣的同学可以深入探究一下下哟。
伪类方式
前面也说过，伪类:after和:before可以帮我们做很多事，这一点不假，除了实现等高布局之外，也可以辅助我们实现垂直水平居中。
不知道大家平时制作中是否有碰到多行文本水平垂直居中的效果。（解决方案大家都有）当然，这种效果对现一个常切页面的页面仔来说，并不是难题，其他的解决方案我就不说了，我们来探讨一个使用CSS伪类的方案。
大家或许还记得使用display:inline-block配合一个空标签<i></i>的方式，其实这个方案也和这个一样，只是我们借助:after或:before之类的将空标签<i>替代掉了。而其他的并没有变化，例如：
其CSS样式如下：
置顶页脚（Sticky Footer）
有时候在制作页面时，当内容不足一屏显示的时候，页脚会跟随在内容后面，而这样的效果直接影响页面的美观。为了避免这种现象，需要将页脚置顶，如下图所示：
注：上图来自于GALEN GIDMAN的《Responsive, Flexible-Height Sticky Footers in CSS》一文。
实现上图的效果，在《如何将页脚固定在页面底部》一文中介绍了四种实现方法。其实除了这四种方法，还有其他的一些方法，接下来要和大家一起探讨新的解决方案。
模拟表格方式
首先要跟大家探讨的是通过display的table和table-cell属性来模拟表格的形式，从而实现页脚置顶效果。
HTML
结构就不探讨了。接来看CSS。
CSS
前面也说过了，使用的是display来模拟表格的方式。而整个代码中最关键的部分是：
效果如下所示：
当然，这个也存在兼容性的问题，不过你使用现代码浏览器访问应该是没有问题的（人太懒了，没做兼容测试）。不过你要感兴趣的话，可以阅读Torben写的《Sticky CSS footers: The flexible way》，里面介绍的比实详细。
Flexbox方式
转来转去又转到Flexbox上面了，同样的Flexbox也可以实现页脚置顶的效果。这样更能彰显出Flexbox在CSS的强大。终有一天，Flexbox将会成为前端人员的最大福利。别的不说了，我们来看如何实现才是关键。
HTML
CSS
效果如下：
实现整个效果最关键的代码其实就那么几行：
是不是比想象中的要简单，是不是更觉得Flexbox更实用了。这里只是简单介绍了如何实现，如果你想了解当中的原委，建议阅读Flexbox相关的教程，或者阅读Emil Björklund写的教程《Sticky footers, flexbox and IE10》。
Sass方式
在Compass中提供了一个@mixin sticky-footer来实现页脚置顶的效果。不过这个@mixin sticky-footer对其结构有一定的要求：
HTML
简单的看看@mixin sticky-footer是如何定义的吧：
SCSS
原理很简单，在@mixin sticky-footer中使用的是如何将页脚固定在页面底部介绍的原理。只不过在Sass中使用了变量，方便维护与调用。具体这个Sass是什么怎么回事，我想很多接触过Sass的同学都能看懂。如果你想深入了解这个@mixin是怎么来的，可以点击这里阅读。
在实际中，只需要这样调用：
编译出来的CSS:
效果如下所示：
总结
如果有你耐性跟着看到这里，我想你也很累了。其实在Web制作中实现等高列布局、垂直水平居中和置顶页脚甚至任何其他效果都不是难事，而且也有多种方案。或许看到最后，有人会说，你这是东西都不兼容。很多时候我们就是束缚在这些兼容性呀之类上面。我们应该尽量的去扩展自己的思维，让更简单更好的方法实现我们需要的效果。就如文章中Flexbox属性，他既可以让你实现等高列布局，也能让你实现垂直水平居中，而且还能让你实现置顶页脚效果。当然还有其他的方法可能没被我发现，如果你有更好的方案希望能一起分享。因为我们不必纠结兼容，尽量大胆去想，去创造新的方法。最后希望这篇文章对大家有所帮助。
如需转载，烦请注明出处：http://www.w3cplus.com/css/pure-css-create-equal-height-column-layout-and-certical-horizontal-centers-and-sticky-footer.html
看DEMO效果也请至上述链接。
本篇文章来源于微信公众号: TripDesign
