【CSS 布局】 Sticky Footer布局

Sticky footer布局是什么？
我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。

一、Sticky Footer布局

Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局。

footer 可以是任意的元素，该布局会形成一种当内容不足，footer 会定位在视口的最低部，当内容充足，footer 会紧跟在内容后面的效果。

<div class="main">
  <div class="header">header</div>
  <div class="container">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</div>

基本CSS样式如下

body {
  margin: 0;
}

.container {
  height: 50px;
  background-color: #fff;
}

.left {
  height: 50px;
  width: 200px;
  background-color: antiquewhite;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
}

.right {
  height: 50px;
  background-color: azure;
  font-size: 12px;
  line-height: 50px;
}

.mt5 {
  margin-top: 5px;
}

/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

1.绝对定位

通过绝对定位的方式实现Sticky Footer布局的步骤如下：

(1)设置最外层容器高度为100%；

(2)让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100%;

(3)在中间区域设置padding-bottom为footer的高度 ;

(4)底部栏绝对定位，并一直吸附在底部即可实现。由于开启了绝对定位，宽度成了自适应，设置为100% bottom:0 始终保持底部

<div class="main position-relative min-height-100">
  <div class="header">header</div>
  <div class="container padding-bottom">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
  </div>
  <div class="footer position-absolute width-100 bottom-0">footer</div>
</div>

基本CSS样式如下

.position-relative{
  position: relative;
}
.min-height-100{
  min-height: 100%;
}
.padding-bottom{
  padding-bottom: 100px;
}
.position-absolute{
  position: absolute;
}
.width-100{
  width: 100%;
}
.bottom-0{
  bottom: 0;
}

2. 使用calc函数

(1)设置中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可。

<div class="main">
  <div class="header">header</div>
  <div class="container min-height-calc">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</div>

基本样式如下

.min-height-calc{
  min-height: calc(100vh - 200px);
}

3.Flex布局

(1)开启 flex 布局, display: flex;

(2)将子元素布局方向修改为垂直排列,flex-flow: column;

(3)设置最小高度为当前视口 min-height: 100vh;,使不管中间部分有多高，始终都可以保持在底部

(4)设置中间部分容器高度为自适应 , flex: 1;

<div class="main display-flex flex-flow-column min-height-100vh">
  <div class="header">header</div>
  <div class="container flex-1">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</div>

css基本样式如下

.display-flex{
  display: flex;
}

.flex-flow-column{
  flex-flow: column;
}

.min-height-100vh{
  min-height: 100vh;
}

.flex-1{
  flex: 1;
}

4.Grid布局

(1)开启 grid 布局

(2)设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部

<div class="main display-grid grid-template-rows-auto-1fr-auto min-height-100vh">
  <div class="header">header</div>
  <div class="container">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
  </div>
  <div class="footer">footer</div>
</div>

基本样式如下

.display-grid{
  display: grid;
}

.grid-template-rows-auto-1fr-auto{
  grid-template-rows: auto 1fr auto;
}

.min-height-100vh{
  min-height: 100vh;
}