Sticky Footer 绝对底部的两种套路

标签: Sticky Footer
6人阅读 评论(0) 收藏 举报
分类:

Sticky Footer 绝对底部的两种套路

最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐

绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果:

当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到

而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位

 

一、经典套路

这种套路的思路是,给内容区域设置 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: -60px;
}
复制代码

需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin, 必须保持一致

这种写法的兼容性非常好,实测 IE7 也能正常展示

但是如果页面的主体布局有其他兼容性问题,Sticky Footer 就需要做一些相应的修改

 

二、Flexbox

不得不说,CSS3 带来了前端的一次变革,其中 Flexbox 更是带来了网页布局的一次变革

虽然兼容性限制了 Flexbox 在国内的推广,但不可否认的是,Flexbox 是前端布局的一大趋势

如果你还不了解 Flexbox,可以看看阮一峰老师的博客 Flex 布局教程:语法篇

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 部分减肥成功,仅仅使用四行代码,就解决了曾经困扰了一代人的难题

而且使用 Flexbox,就不需要限定 footer 的高度,让页面布局更加灵活

当然缺点也是显而易见的,只有 IE10 及以上的浏览器才支持 flex 布局

 

最后,欢迎大家分享一些新的套路~

查看评论

CSS Sticky Footer: 完美的CSS绝对底部

CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案。在CSS的世界里,似乎没有完美这种说法。所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧。 先说我们为什么会使用到这个...
  • u013617622
  • u013617622
  • 2015-03-02 19:33:45
  • 540

Sticky Footer: 完美的CSS绝对底部

CSS Sticky Footer: 完美的CSS绝对底部前段时间在做项目时,遇到一个问题,如下: 移动端的正文内容不定,内容较少时,底部的组件位于窗口的下面;但是当内容较多时,底部的部件和正文和出...
  • ALSNEI
  • ALSNEI
  • 2017-01-11 15:59:15
  • 705

CSS Sticky footer完美底部布局

html结构:
  • github_38861674
  • github_38861674
  • 2017-08-01 16:23:59
  • 829

footer随能容高度,固定到底部Sticky footers

第一种是flex布局 http://www.w3cplus.com/css3/css-secrets/sticky-footers.html 第二种普通方法布局 ...
  • a1102086061
  • a1102086061
  • 2017-05-02 14:04:38
  • 184

一道经典的css面试题。固定底部(sticky footer)

固定底部 sticky footer
  • u011456552
  • u011456552
  • 2017-02-19 16:19:09
  • 424

Sticky Footer绝对底部的实现

介绍一下如何用实现Sticky Footer绝对底部。
  • kaelyn_X
  • kaelyn_X
  • 2017-10-11 20:26:31
  • 91

sticky-footer布局

今天做一个关于vue的demo,写一个弹出层时发现了一个问题,弹出层样式如图 开始我对关闭按钮用position:fixed布局定位在底部,但是当我的内容太多,超出了一定的高度的时候就出现下面的状...
  • dongguan_123
  • dongguan_123
  • 2017-04-28 15:43:02
  • 413

css sticky footer布局+流式布局

css sticky footer布局参考地址:张鑫旭老师-css sticky footer布局 结合项目具体场景给出介绍:点击信息,弹出浮层,显示详细信息。浮层最下面有个关闭按钮,一直处在底部,...
  • u013217071
  • u013217071
  • 2017-06-06 10:35:35
  • 1143

Sticky Footer 让页脚紧贴页面底部

功能效果:当页面内容不超过当前屏幕高度时,页脚在屏幕的底部;当页面内容过多超过当前屏幕高度时,页脚在内容后面。图片效果演示: 当页面内容不超过当前屏幕高度时: 当页面内容过多超过当前屏幕高度时: ...
  • qq_34149935
  • qq_34149935
  • 2017-02-19 16:05:25
  • 309

网页布局—StickyFooter

网页布局中经常会遇到这种问题,那就是我们的网页footer并不能呢一直停留在网页的底部。我们一般的惯用方法就是将网页的footer固定定位。但是如果我们将footer固定定位后,我们的网页内容多,一屏...
  • zp1996323
  • zp1996323
  • 2016-02-08 22:48:14
  • 566
    个人资料
    持之以恒
    等级:
    访问量: 9008
    积分: 541
    排名: 9万+
    最新评论