再谈等高列布局、水平垂直居中与置顶页脚

发布于 大漠

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实现类似一张这样的背景,我们需要采用多色渐变,如示例中所示,总共使用了三个颜色:

  • 左侧色为#f36,从0点起到220px止
  • 间隔色为#fff,从221px起到240px止
  • 主内容色为#f63,从241px起到100%止

如下图所示:

再说等高列布局、水平垂直居中与置顶页脚

既然知道原理了,我们来看看如何实现。同样采用上例的结构,我们通过CSS3的线性渐变来实现两列等高布局:

* {
  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-image: -webkit-linear-gradient(to right,#f36 0, #f36 220px, #fff 221px,#fff 240px,#f63 241px, #f63 100%);
  background-image: linear-gradient(to right,#f36 0, #f36 220px, #fff 221px,#fff 240px,#f63 241px, #f63 100%); 
  margin-bottom: 10px;
  overflow: hidden;
}

.aside {
  width: 220px;
  float: left;
  margin-right: 20px;
  padding: 5px 15px;
  min-height: 200px;
}
.content {
  width: 720px;
  float: left;
  padding: 5px 15px;
}
#footer .container {
  background-color: #f36;
  padding: 20px;
}

效果DEMO所示:

再说等高列布局、水平垂直居中与置顶页脚

到此,你是不是觉得非常的完美呀。说实在的,如果你不考虑低版本,这是完美的解决方案。那我们在此就是为了扩展思路吧,终有一天,你的等高布局能用上这种解决方案。而在此解决方案中最关键的是使用线性渐变

#page .container {
  background-image: -webkit-linear-gradient(to right,#f36 0, #f36 220px, #fff 221px,#fff 240px,#f63 241px, #f63 100%);
  background-image: linear-gradient(to right,#f36 0, #f36 220px, #fff 221px,#fff 240px,#f63 241px, #f63 100%); 
  margin-bottom: 10px;
  overflow: hidden;
}

至于是何原理,大家还是仔细搞懂渐变,一旦你搞懂渐变,这个对你来说就是小菜一碟。

伪类方式

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值;
  • 背景颜色设置在伪类生成的内容上,并且通过topbottom拉伸,致使他们等高。
  • 给伪类设置z-index的值为-1,让其在内容底部。

根据上述,我们来实战一下。

HTML结构依照上例不动,我们来看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 {
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
}

.aside {
  width: 220px;
  float: left;
  margin-right: 20px;
  padding: 5px 15px;
  min-height: 200px;
}

.content {
  width: 720px;
  float: left;
  padding: 5px 15px;
}

.aside:before,
.content:before{
  content:"";
  position: absolute;
  top:0;
  bottom:0;
  z-index:-1;
}

.aside:before {
  left:0;
  width: 220px;
  background: #f63;
}
.content:before {
  width: 720px;
  background: #c6f;
  right:0;
}
#footer .container {
  background-color: #f36;
  padding: 20px;
}

看着一大串代码,是否有些晕,其实关键的就下面几行代码:

#page .container {
  position: relative;
}

.aside:before,
.content:before{
  content:"";
  position: absolute;
  top:0;
  bottom:0;
  z-index:-1;
}

.aside:before {
  left:0;
  width: 220px;
  background: #f63;
}
.content:before {
  width: 720px;
  background: #c6f;
  right:0;
}

最后看看效果吧:

再说等高列布局、水平垂直居中与置顶页脚

水平垂直居中

说起水平垂直居中大家常看到的是使用绝对定位与负margin的配合或者是inline-block配合vertical-align:middle等方法。当然还有其他一些解决方案,比如说,在水平垂直居中系列中介绍了一些制作方案。但这些方案或多或少都存在一些局限性。假设,要垂直水平居中的元素大小是未知的,你要使用绝对定位与负margin配合就难上加难。当然你会说,使用表格将解决我一切所需,的确是这样,那么除了这些方法,还有别的方案吗?接下来我们就针对这个自设问题,来一起探讨其他几种实现水平垂直居中的方案。

为了更好的阐述后面的方案,我们这里有一个命题:让未知大小容器(未知行数的文本)实现水平垂直居中。看到这样的命题,有人或许会说神经病又来了,如果你也这么认为,就让当是神病出现了吧。我们不纠结这个,还是看几种解决方案吧。

Flexbox方式

什么是Flexbox就不说了,对于让Flexbox实现水平垂直居中可以说是绝对的一流。假设我想让一张图片(图片大小不知)在body中实现水平垂直居中。

HTML

<body>
    <img src="http://img0.bdstatic.com/img/image/shouye/mxangel.jpg" alt="" />
</body>

结构非常简单,body中有一张图片。

CSS

我们要做的是,如何使用Flexbox让imgbody中实现水平垂直居中。

*{
  margin: 0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;/*firefox下需要*/
}

代码就这么几行,有一个关键之处,需要将htmlbody高度设置为100%;然后只需要在body中配置样式。此处使用了Flexbox中的居中属性。至于他们原理,这里就不多说了,感兴趣的同学可以看看Flexbox相关的教程。

如果你想体验一下效果,请点击下图:

再说等高列布局、水平垂直居中与置顶页脚

在上面DEMO的基础上,你调整浏览器窗口大小:

再说等高列布局、水平垂直居中与置顶页脚

当然你随意调整图片大小也能让其居中:

再说等高列布局、水平垂直居中与置顶页脚

兼容性咱谈不聊了,咱们继续。

transform与绝对定位方式

在当今天移动设备横行天下的年代,给我们前端人员制作页面带来无尽的烦恼,具体原因,大家都懂的。那么这里我们来模拟一个情形。有一个弹出层,我不知道他的大小有多大,我想让他在各种设备中永远水平居中。在下面示例中,我们用一个Dive来当作是弹出窗吧(偷懒了,不想花太多时间去做这个弹出窗效果)。

回到我们问题所在,在示例中有这样的一个结构:

<div class="modal">
    <div class="modal-header">弹出窗标题</div>
    <div class="modal-body">在当今天移动。。。</div>
</div>

结构不分析了。直接看CSS:

*{
  margin: 0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}

.modal {
  border: 1px solid #bbb;
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0,0,0,.5);

  position:absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.modal-header {
  padding: 10px 20px;
  background: rgba(0,0,0,.25);
  color:#fff;
}
.modal-body{
  padding: 20px;
  background: #fff;
}

先来体验一下效果吧:

再说等高列布局、水平垂直居中与置顶页脚

把案例窗口调大:

再说等高列布局、水平垂直居中与置顶页脚

其实实现这个效果并不复杂,在这里我们就要借助了positiontransform来实现,其关键代码:

.modal {  
  position:absolute;
  top:50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

从示例中,我们可以得知,我们不知道页面在什么屏幕下浏览,也未对弹出窗.modal设置过任何大小值(widthheight)。而这神奇的效果是借助于绝对定位和负margin原理,只不过不同的是这里采用了CSS3的transform中的translate,来了个负负得正的玩法。有兴趣的同学可以深入探究一下下哟。

伪类方式

前面也说过,伪类:after:before可以帮我们做很多事,这一点不假,除了实现等高布局之外,也可以辅助我们实现垂直水平居中。

不知道大家平时制作中是否有碰到多行文本水平垂直居中的效果。(解决方案大家都有)当然,这种效果对现一个常切页面的页面仔来说,并不是难题,其他的解决方案我就不说了,我们来探讨一个使用CSS伪类的方案。

大家或许还记得使用display:inline-block配合一个空标签<i></i>的方式,其实这个方案也和这个一样,只是我们借助:after:before之类的将空标签<i>替代掉了。而其他的并没有变化,例如:

<body>
    <div>在当今天移动设备横行天下的年代...。</div>
</body>

其CSS样式如下:

*{
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
}

html,
body {
  height:100%;
}

div {
  display:inline-block;
  vertical-align: middle;
  width: 99.5%;
}

body:after {
  content:"";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0px;
}

其效果如Demo所示。

置顶页脚(Sticky Footer)

有时候在制作页面时,当内容不足一屏显示的时候,页脚会跟随在内容后面,而这样的效果直接影响页面的美观。为了避免这种现象,需要将页脚置顶,如下图所示:

再说等高列布局、水平垂直居中与置顶页脚

注:上图来自于GALEN GIDMAN的《Responsive, Flexible-Height Sticky Footers in CSS》一文。

实现上图的效果,在《如何将页脚固定在页面底部》一文中介绍了四种实现方法。其实除了这四种方法,还有其他的一些方法,接下来要和大家一起探讨新的解决方案。

模拟表格方式

首先要跟大家探讨的是通过displaytabletable-cell属性来模拟表格的形式,从而实现页脚置顶效果。

HTML

<div class="wrapper">
    <div id="header">
        <div class="inner">Header...</div>
    </div>
    <div id="page">
        <div id="sidebar">Sidebar...</div>
        <div id="content">content</div>
    </div>
    <div id="footer">
        <div class="inner">Footer...</div>
    </div>
</div>

结构就不探讨了。接来看CSS。

CSS

*{
  margin:0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.wrapper {
  table-layout: fixed;
  width: 960px;
  margin: 0 auto;
  display: table;
  height: 100%;
  color: #fff;
}

.wrapper > div {
  display: table-row;
  height: 1px;
}

#page {
  height: auto;
}

.inner {
  padding: 10px 20px;
  min-height: 50px;
  background: #f36;
}

#sidebar {
  width: 220px;
  background: #63f;
  float: left;
  padding: 10px 20px;
}

#content {
  width: 720px;
  background:#f33;
  float:right;
  padding: 10px 20px;
}
#header .inner {
  margin-bottom: 10px;
}

前面也说过了,使用的是display来模拟表格的方式。而整个代码中最关键的部分是:

html,
body {
  height: 100%;
}

.wrapper {
  table-layout: fixed;
  width: 960px;
  margin: 0 auto;
  display: table;
  height: 100%;
  color: #fff;
}

.wrapper > div {
  display: table-row;
  height: 1px;
}

#page {
  height: auto;
}

效果如下所示:

再说等高列布局、水平垂直居中与置顶页脚

当然,这个也存在兼容性的问题,不过你使用现代码浏览器访问应该是没有问题的(人太懒了,没做兼容测试)。不过你要感兴趣的话,可以阅读Torben写的《Sticky CSS footers: The flexible way》,里面介绍的比实详细。

Flexbox方式

转来转去又转到Flexbox上面了,同样的Flexbox也可以实现页脚置顶的效果。这样更能彰显出Flexbox在CSS的强大。终有一天,Flexbox将会成为前端人员的最大福利。别的不说了,我们来看如何实现才是关键。

HTML

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

<div id="page">
    <div class="container">
        <div id="sidebar">Sidebar...</div>
        <div id="content">Content...</div>
    </div>
</div>

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

CSS

*{
  margin:0;
  padding:0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body{
  height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#page {
  flex: 1;
}

.container {
  width: 960px;
  margin: 0 auto;
  color:#fff;
  overflow:hidden;
}

#sidebar {
  width: 220px;
  float: left;
  background:#3ef;
  padding: 10px 20px;
}

#content {
  width: 720px;
  float: right;
  background: #a32;
  padding:10px 20px;
}

#header .container {
  background:#f35;
  padding: 10px 20px;
  margin-bottom: 15px;
}
#footer .container {
  background: #c2c;
  padding: 10px 20px;
}

效果如下:

再说等高列布局、水平垂直居中与置顶页脚

实现整个效果最关键的代码其实就那么几行:

html,
body{
  height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#page {
  flex: 1;
}

是不是比想象中的要简单,是不是更觉得Flexbox更实用了。这里只是简单介绍了如何实现,如果你想了解当中的原委,建议阅读Flexbox相关的教程,或者阅读Emil Björklund写的教程《Sticky footers, flexbox and IE10》。

Sass方式

Compass中提供了一个@mixin sticky-footer来实现页脚置顶的效果。不过这个@mixin sticky-footer对其结构有一定的要求:

HTML

<div class="wrapper">
    <div id="layout">
        <div id="header">Header....</div>
        <div id="sidebar">Sidebar...</div>
        <div id="content">Content</div>
        <div id='layout_footer'></div>
    </div>
    <div id="footer">Footer...</div>
</div>

简单的看看@mixin sticky-footer是如何定义的吧:

SCSS

@mixin sticky-footer($footer-height, $root-selector: unquote("#root"), $root-footer-selector: unquote("#root_footer"), $footer-selector: unquote("#footer")) {
  html, body {
    height: 100%;
  }
  #{$root-selector} {
    clear: both;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: -$footer-height;
    #{$root-footer-selector} {
      height: $footer-height;
    }
  }
  #{$footer-selector} {
    clear: both;
    position: relative;
    height: $footer-height;
  }
}

原理很简单,在@mixin sticky-footer中使用的是如何将页脚固定在页面底部介绍的原理。只不过在Sass中使用了变量,方便维护与调用。具体这个Sass是什么怎么回事,我想很多接触过Sass的同学都能看懂。如果你想深入了解这个@mixin是怎么来的,可以点击这里阅读。

在实际中,只需要这样调用:

@include sticky-footer(72px, "#layout", "#layout_footer", "#footer");

.wrapper {
  height: 100%;
  width: 960px;
  margin-left: auto;
  margin-right:auto;

  #header {
    background: #f36;
    height: 72px;
    margin-bottom: 20px;
  }

  #footer {
    background: #f36;
  }

  #sidebar {
    width: 220px;
    float: left;
    background: #c3e;
  }

  #content {
    background: #cfc;
    width: 720px;
    float: right;
  }
}

编译出来的CSS:

html, body {
  height: 100%; }

#layout {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -72px; 
}
#layout #layout_footer {
    height: 72px; 
 }

#footer {
  clear: both;
  position: relative;
  height: 72px; 
}

.wrapper {
  height: 100%;
  width: 960px;
  margin-left: auto;
  margin-right: auto; 
}
.wrapper #header {
  background: #f36;
  height: 72px;
  margin-bottom: 20px; 
}
.wrapper #footer {
  background: #f36; 
}
.wrapper #sidebar {
  width: 220px;
  float: left;
  background: #c3e; 
}
.wrapper #content {
  background: #cfc;
  width: 720px;
  float: right; 
}

效果如下所示:

再说等高列布局、水平垂直居中与置顶页脚

总结

如果有你耐性跟着看到这里,我想你也很累了。其实在Web制作中实现等高列布局、垂直水平居中和置顶页脚甚至任何其他效果都不是难事,而且也有多种方案。或许看到最后,有人会说,你这是东西都不兼容。很多时候我们就是束缚在这些兼容性呀之类上面。我们应该尽量的去扩展自己的思维,让更简单更好的方法实现我们需要的效果。就如文章中Flexbox属性,他既可以让你实现等高列布局,也能让你实现垂直水平居中,而且还能让你实现置顶页脚效果。当然还有其他的方法可能没被我发现,如果你有更好的方案希望能一起分享。因为我们不必纠结兼容,尽量大胆去想,去创造新的方法。最后希望这篇文章对大家有所帮助。

如需转载,烦请注明出处:https://www.fedev.cn/css/pure-css-create-equal-height-column-layout-and-certical-horizontal-centers-and-sticky-footer.html

Vans Varsity Pack Sk8-Hi Era