详解Sticky Footer 肯定底部的两种套路

近期面了好几个前端开发，工作中工作经验有高有低，竟然都不知道道肯定底部是甚么，也沒有人能讲出1种完成方法，让我禁不住感叹前端开发行业的参差不齐

肯定底部，或说 Sticky Footer，是1种古老且經典的网页页面实际效果：

当网页页面內容超过显示屏，页脚控制模块会像一切正常网页页面1样，被推到內容正下方，必须拖拽翻转条才可以看到

而当网页页面內容小于显示屏高宽比，页脚控制模块会固定不动在显示屏底部，就好像底边距为零的固定不动精准定位

1、經典套路

这类套路的思路是，给內容地区设定 min-height: 100%，将 footer 推到显示屏正下方

随后给 footer 加上 margin-top，其值为 footer 高宽比的负值，就可以让 footer 返回显示屏底部

HTML：

<div class="wrap">
  <div class="content">
    <p>填充內容</p>
  </div>
</div>
<div class="footer">
  <p>这是页脚</p>
</div>

CSS:

html,body {
  height: 100%;
}
    
body > .wrap {
  min-height: 100%;
}
    
.content {
  /* padding-bottom 等于 footer 的高宽比 */
  padding-bottom: 60px;
}
    
.footer {
  width: 100%;
  height: 60px;
  /* margin-top 为 footer 高宽比的负值 */
  margin-top: ⑹0px;
}

必须留意的便是內容地区 content 的 padding、footer 的 height 和 margin， 务必维持1致

这类写法的适配性十分好，实测 IE7 也能一切正常展现

可是假如网页页面的行为主体合理布局有别的适配性难题，Sticky Footer 就必须做1些相应的改动

2、Flexbox

迫不得已说，CSS3 带来了前端开发的1次转型，在其中 Flexbox 更是带来了网页页面合理布局的1次转型

尽管适配性限定了 Flexbox 在中国的营销推广，但不能否认的是，Flexbox 是前端开发合理布局的1大发展趋势

HTML:

<div class="content">
  <p>填充內容</p>
  <hr />
</div>
<div class="footer">
  <p>这是页脚@WiseWrong</p>
</div>

CSS:

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

body > .content {
  flex: 1;
}

和經典套路相比，最先是 HTML 一部分，內容地区 content 已不必须 wrap 器皿

随后 CSS 一部分减肥取得成功，仅仅应用4行编码，就处理了以前困扰了1代人的困难

并且应用 Flexbox，就不必须限制 footer 的高宽比，让网页页面合理布局更为灵便

自然缺陷也是不言而喻的，仅有 IE10 及以上的访问器才适用 flex 合理布局

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。