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

日期:2021-01-20 类型:科技新闻 

关键词:商城网站建设,微商好助手,微商引流,电商网站模板,微信商家小程序

近期面了好几个前端开发,工作中工作经验有高有低,竟然都不知道道肯定底部是甚么,也沒有人能讲出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 合理布局

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

上一篇:CSS: hover挑选器的应用详解 返回下一篇:没有了