divdivclass="container"Header.../div/divdivdivclass="container"divclass="aside"Sidebar.../divdivclass="content"Maincontent.../div/div/divdivdivclass="container"Footer..../div/div
非常常见的两列布局。接下来才是关键，使用Flexbox实现侧栏.aside和主内容.contetn实现等高效果。CSS为了更好的看出效果，我们先给整个布局添加一些基本样式：*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;}.container{width:px;margin:0auto;color:#fff;}#header.container{background-color:#f6;min-height:50px;padding:0px;margin-bottom:10px;}#page.container{background-color:#cef;min-height:00px;margin-bottom:10px;}.aside{width:0px;background-color:#6e;padding:5px15px;}.content{background-color:#66f;padding:5px15px;}#footer.container{background-color:#f6;padding:0px;}
此时你将看到的效果是这样的：demo这样的结局不是大家想看到的，来点精彩的，在上面代码基础上添加Flexbox功能：#page.container{background-color:#cef;min-height:00px;margin-bottom:10px;display:flex;}.aside{width:0px;background-color:#6e;padding:5px15px;margin-right:0px;}.content{background-color:#66f;padding:5px15px;flex:1;}
从上面代码可以看出，在两列容器#page.container上添加了display:flex，在.content添加了自适应flex:1样式，为了让两列之间有一个间距，在.aside上添加了margin-right:0px;。就这么几行代码，轻松实现了等高列布局。特别声明：请使用Chrome浏览器访问DEMO，如果需要兼容更多浏览器效果，请参考《一个完整的Flexbox指南》一文，添加对应的兼容代码。渐变方式等高列布局，有一种简单的方法就是根据列宽和其背景色制作一张背景图，然后在Y轴方向重铺。但这种方式在改变宽度和背景颜色的时候就非常的麻烦。那么根据背景图的思路，我们可以考虑使用CSS的渐变属性来制作类似于这样的一张背景图。这时假设你已经对Gradient有一定的了解，接下来我们主要要探讨的是如何使用Gradient模拟出使用背景图制作的等高布局。假设我们的两列布局，左侧是0px,主内容是70px，两者间距是0px(容器宽度是px)。我们需要一个类似于下面的背景图：那么使用Gradient实现类似一张这样的背景，我们需要采用多色渐变，如示例中所示，总共使用了三个颜色：左侧色为#f6，从０点起到0px止 间隔色为#fff，从1px起到0px止 主内容色为#f6，从1px起到%止如下图所示：既然知道原理了，我们来看看如何实现。同样采用上例的结构，我们通过CSS的线性渐变来实现两列等高布局：*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;}.container{width:px;margin:0auto;color:#fff;}#header.container{background-color:#f6;min-height:50px;padding:0px;margin-bottom:10px;}#page.container{background-image:-webkit-linear-gradient(toright,#f60,#f60px,#fff1px,#fff0px,#f61px,#f6%);background-image:linear-gradient(toright,#f60,#f60px,#fff1px,#fff0px,#f61px,#f6%);margin-bottom:10px;overflow:hidden;}.aside{width:0px;float:left;margin-right:0px;padding:5px15px;min-height:00px;}.content{width:70px;float:left;padding:5px15px;}#footer.container{background-color:#f6;padding:0px;}
效果DEMO所示：到此，你是不是觉得非常的完美呀。说实在的，如果你不考虑低版本，这是完美的解决方案。那我们在此就是为了扩展思路吧，终有一天，你的等高布局能用上这种解决方案。而在此解决方案中最关键的是使用线性渐变：#page.container{background-image:-webkit-linear-gradient(toright,#f60,#f60px,#fff1px,#fff0px,#f61px,#f6%);background-image:linear-gradient(toright,#f60,#f60px,#fff1px,#fff0px,#f61px,#f6%);margin-bottom:10px;overflow:hidden;}
至于是何原理，大家还是仔细搞懂渐变，一旦你搞懂渐变，这个对你来说就是小菜一碟。伪类方式CSS伪类:befo和:after或者CSS伪元素::befo和::after在实际中可以帮助我们做很多事情。有关于:befo和:after相关教程可以阅读《学习使用：befo和：after伪元素》。在这篇文章中，我们同样可以使用伪类来实现等高列布局。这个思路主要来自于KezzBracey写的一篇文章《QuickTip:SolvingtheEqualHeightColumnConundrum》。就拿这篇博文中的示例来说，先来看几张从文中搬来的图片，这几张图能帮助大家解惑，伪类是如何实现等高列布局：特别声明，以上三张图来自于上图主要说明.wrap容器中包含三个子元素和其他们对应的伪类。通过伪类设置背景色。使用这种方法有几个关键点：容器.wrap需要设置position:lative； 伪类:befo或:after需要绝对定位，不同元素的位置调整对应的left或者right值； 背景颜色设置在伪类生成的内容上，并且通过top和bottom拉伸，致使他们等高。 给伪类设置z-index的值为-1，让其在内容底部。根据上述，我们来实战一下。HTML结构依照上例不动，我们来看CSS的实现方法：*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;}.container{width:px;margin:0auto;color:#fff;}#header.container{background-color:#f6;min-height:50px;padding:0px;margin-bottom:10px;}#page.container{position:lative;overflow:hidden;margin-bottom:15px;}.aside{width:0px;float:left;margin-right:0px;padding:5px15px;min-height:00px;}.content{width:70px;float:left;padding:5px15px;}.aside:befo,.content:befo{content:"";position:absolute;top:0;bottom:0;z-index:-1;}.aside:befo{left:0;width:0px;background:#f6;}.content:befo{width:70px;background:#c6f;right:0;}#footer.container{background-color:#f6;padding:0px;}
看着一大串代码，是否有些晕，其实关键的就下面几行代码：#page.container{position:lative;}.aside:befo,.content:befo{content:"";position:absolute;top:0;bottom:0;z-index:-1;}.aside:befo{left:0;width:0px;background:#f6;}.content:befo{width:70px;background:#c6f;right:0;}
最后看看效果吧：水平垂直居中说起水平垂直居中大家常看到的是使用绝对定位与负margin的配合或者是inline-block配合vertical-align:middle等方法。当然还有其他一些解决方案，比如说，在水平垂直居中系列中介绍了一些制作方案。但这些方案或多或少都存在一些局限性。假设，要垂直水平居中的元素大小是未知的，你要使用绝对定位与负margin配合就难上加难。当然你会说，使用表格将解决我一切所需，的确是这样，那么除了这些方法，还有别的方案吗？接下来我们就针对这个自设问题，来一起探讨其他几种实现水平垂直居中的方案。为了更好的阐述后面的方案，我们这里有一个命题：让未知大小容器（未知行数的文本）实现水平垂直居中。看到这样的命题，有人或许会说神经病又来了，如果你也这么认为，就让当是神病出现了吧。我们不纠结这个，还是看几种解决方案吧。Flexbox方式什么是Flexbox就不说了，对于让Flexbox实现水平垂直居中可以说是绝对的一流。假设我想让一张图片（图片大小不知）在body中实现水平垂直居中。HTMLbodyimgsrc="/uploads/allimg//-9.jpg"alt=""//body
结构非常简单，body中有一张图片。CSS我们要做的是，如何使用Flexbox让img在body中实现水平垂直居中。*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;}html,body{height:%;}body{display:flex;align-items:center;justify-content:center;width:%;/*fifox下需要*/}
代码就这么几行，有一个关键之处，需要将html和body高度设置为%;然后只需要在body中配置样式。此处使用了Flexbox中的居中属性。至于他们原理，这里就不多说了，感兴趣的同学可以看看Flexbox相关的教程。如果你想体验一下效果，