查看: 1824|回复: 0

[DIV/CSS] CSS实现Sticky Footer

发表于 2018-2-13 08:00:02

原文链接:JavaScript之禅

什么是 “Sticky Footer”

所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果:
如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。但如果网页内容不够长,置底的页脚就会保持在浏览器窗口底部。

sticky-footer-1.png

实现方法 1. 将内容部分的底部外边距设为负数

这是个比较主流的用法,把内容部分最小高度设为100%,再利用内容部分的负底部外边距值来达到当高度不满时,页脚保持在窗口底部,当高度超出则随之推出的效果。

  1. <body>
  2. <div class="wrapper">
  3. content
  4. <div class="push"></div>
  5. </div>
  6. <footer class="footer"></footer>
  7. </body>
复制代码
  1. html, body {
  2. height: 100%;
  3. margin: 0;
  4. }
  5. .wrapper {
  6. min-height: 100%;
  7. /* 等于footer的高度 */
  8. margin-bottom: -50px;
  9. }
  10. .footer,
  11. .push {
  12. height: 50px;
  13. }
复制代码

这个方法需要容器里有额外的占位元素(如.push

需要注意的是.wrapper的margin-bottom值需要和.footer的负的height值保持一致,这一点不太友好。

2. 将页脚的顶部外边距设为负数

既然能在容器上使用负的margin bottom,那能否使用负margin top吗?当然可以。

给内容外增加父元素,并让内容部分的底部内边距与页脚高度的值相等

  1. <body>
  2. <div class="content">
  3. <div class="content-inside">
  4. content
  5. </div>
  6. </div>
  7. <footer class="footer"></footer>
  8. </body>
复制代码
  1. html, body {
  2. height: 100%;
  3. margin: 0;
  4. }
  5. .content {
  6. min-height: 100%;
  7. }
  8. .content-inside {
  9. padding: 20px;
  10. padding-bottom: 50px;
  11. }
  12. .footer {
  13. height: 50px;
  14. margin-top: -50px;
  15. }
复制代码

不过这种方法和上一种一样,都需要额外添加不必要的html元素。

3. 使用flexbox弹性盒布局

以上三种方法的footer高度都是固定的,通常来说这不利于网页布局:内容会改变,它们都是弹性的,一旦内容超出固定高度就会破坏布局。所以给footer使用flexbox吧,让它的高度可以变大变小变漂亮~(≧?≦)

  1. <body>
  2. <div class="content">
  3. content
  4. </div>
  5. <footer class="footer"></footer>
  6. </body>
复制代码
  1. html {
  2. height: 100%;
  3. }
  4. body {
  5. min-height: 100%;
  6. display: flex;
  7. flex-direction: column;
  8. }
  9. .content {
  10. flex: 1;
  11. }
复制代码

你还可以在上面添加header或在下面添加更多元素。可从以下技巧选择其一:

flex: 1 使内容(如:.content)高度可以自由伸缩 margin-top: auto

请记住,我们有《Flexbox完整指南(英)》呢~

4. absolute

通过绝对定位处理应该是常见的方案,只要使得页脚一直定位在主容器预留占位位置。

  1. <div class="wrapper">
  2. <div class="content"><!-- 页面主体内容区域 --></div>
  3. <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
  4. </div>
复制代码
  1. html, body {
  2. height: 100%;
  3. }
  4. .wrapper {
  5. position: relative;
  6. min-height: 100%;
  7. padding-bottom: 50px;
  8. box-sizing: border-box;
  9. }
  10. .footer {
  11. position: absolute;
  12. bottom: 0;
  13. height: 50px;
  14. }
复制代码

这个方案需指定 html、body 100% 的高度,且 content 的 padding-bottom 需要与 footer 的 height 一致。

5. calc

通过计算函数 calc 计算(视窗高度 - 页脚高度)赋予内容区最小高度,不需要任何额外样式处理,代码量最少、最简单。

  1. <div class="wrapper">
  2. <div class="content"><!-- 页面主体内容区域 --></div>
  3. <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
  4. </div>
复制代码
  1. .content {
  2. min-height: calc(100vh - 50px);
  3. }
  4. .footer {
  5. height: 50px;
  6. }
复制代码

如果不需考虑 calc() 以及 vh 单位的兼容情况,这是个很理想的实现方案。同样的问题是 footer 的高度值需要与 content 其中的计算值一致。

6. table

通过 table 属性使得页面以表格的形态呈现。

  1. <div class="wrapper">
  2. <div class="content"><!-- 页面主体内容区域 --></div>
  3. <div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
  4. </div>
复制代码
  1. html, body {
  2. height: 100%;
  3. }
  4. .wrapper {
  5. display: table;
  6. width: 100%;
  7. min-height: 100%;
  8. }
  9. .content {
  10. display: table-row;
  11. height: 100%;
  12. }
复制代码

需要注意的是,使用 table 方案存在一个比较常见的样式限制,通常 margin、padding、border 等属性会不符合预期。
笔者不建议使用这个方案。当然,问题也是可以解决的:别把其他样式写在 table 上。

7. 使用Grid网格布局

grid比flexbox还要新很多,并且更佳很简洁,我们同样有《Grid完整指南(英)》奉上~

  1. <body>
  2. <div class="content">
  3. content
  4. </div>
  5. <footer class="footer"></footer>
  6. </body>
复制代码
  1. html {
  2. height: 100%;
  3. }
  4. body {
  5. min-height: 100%;
  6. display: grid;
  7. grid-template-rows: 1fr auto;
  8. }
  9. .footer {
  10. grid-row-start: 2;
  11. grid-row-end: 3;
  12. }
复制代码

遗憾的是,网格布局(Grid layout)目前仅支持Chrome Canary和Firefox Developer Edition版本。

总结

以上几种实现方案,笔者都在项目中尝试过,每个实现的方法其实大同小异,同时也都有自己的利弊。
其中有的方案存在限制性问题,需要固定页脚高度;其中有的方案需要添加额外的元素或者需要 Hack 手段。同学们可以根据页面具体需求,选择最适合的方案。

当然,技术是不断更新的,也许还有很多不同的、更好的方案。但相信大家最终目都是一样的,为了更好的用户体验!

相关连接:

https://aotu.io/notes/2017/04/13/Sticky-footer/ http://liaokeyu.com/技术/2017/01/06/译-CSS五种方式实现Footer置底.html


回复

使用道具 举报