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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

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

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部