经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
CSS Sticky Footer实现代码_CSS教程_CSS
来源：jb51　　时间：2018/12/6 10:04:46　　对本文有异议

本文介绍了CSS Sticky Footer实现代码，分享给大家，具体如下：

上图所显示的效果就是sticky Footer，当页面主题内容不够长时，footer定位在窗口的底部，当页面主题内容超出窗口后，footer显示在页面的最底部

以下给出几种实现方案：

1. FlexBox布局

HTML结构如下：

  1. <body>
  2.  
  3.     <div class="header">Sticky Footer</div>
  4.  
  5.     <div class="content">
  6.  
  7.         <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  8.  
  9.         <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  10.  
  11.         <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  12.  
  13.         <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  14.  
  15.         <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  16.  
  17.         <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  18.  
  19.     </div>
  20.  
  21.     <div class="footer">
  22.  
  23.         <p>This is footer</p>
  24.  
  25.     </div>
  26.  
  27. </body>

主要CSS如下：

  1. body{
  2.  
  3.     display: flex;
  4.  
  5.     flex-flow: column;
  6.  
  7.     min-height: 100vh;
  8.  
  9. }
  10.  
  11. .content{
  12.  
  13.     flex: 1;
  14.  
  15. }

FlexBox实现就是这么简单，实现效果也贴上来

贴图的效果好像不太好，但是效果是实现了的哦！！！！

2. 经典套路：padding-bottom + margin-top

HTML结构如下：

  1. <body>
  2.  
  3.     <div class="wrapper clearfix">
  4.  
  5.         <div class="title">Sticky Footer</div>
  6.  
  7.         <div class="content">
  8.  
  9.             <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  10.  
  11.             <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  12.  
  13.             <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  14.  
  15.         </div>
  16.  
  17.     </div>
  18.  
  19.     <div class="footer">
  20.  
  21.         <p>This is footer</p>
  22.  
  23.     </div>
  24.  
  25. </body>

主要CSS如下：

  1. .wrapper{
  2.  
  3.     min-height: 100vh;
  4.  
  5. }
  6.  
  7. .content{
  8.  
  9.     padding-bottom: 50px;
  10.  
  11. }
  12.  
  13. .footer{
  14.  
  15.     height: 50px;
  16.  
  17.     margin-top: -50px;
  18.  
  19. }

实现效果（感觉需要装个录屏软件了）：

 

 

使用此方案时要注意以下几点：

1. wrapper的最小高度要等于窗口高度

2. content的padding-bottom、footer的margin-top和height这三个属性值的绝对值需保持一致（因为margin-top为负值，所以说绝对值）；保持一致的原因是更好的实现sticky footer，虽然height什么的偏小也能实现sticky footer效果，但是给最底部留下了空隙。

3. 这种方案的兼容性不错，各大主流浏览器均可，emmmmm，还不错

4. 当主体使用悬浮布局的时候，那么就需要考虑一个兼容性问题，这里使用的重点是为了Google chrome

上述第四条兼容性解决方案：

给.wrapper加上著名的clearfix hack：

  1. .clearfix{
  2.  
  3.     display: inline-block
  4.  
  5. }
  6.  
  7. .clearfix:after{
  8.  
  9.     display: block
  10.  
  11.     content: "."
  12.  
  13.     height: 0
  14.  
  15.     line-height: 0
  16.  
  17.     clear: both
  18.  
  19.     visibility: hidden
  20.  
  21. }

3. 固定高度的解决方案

HTML结构如下：

  1. <body>
  2.  
  3.     <div class="wrapper">
  4.  
  5.         <div class="header">Sticky Footer</div>
  6.  
  7.         <div class="content">
  8.  
  9.             <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  10.  
  11.             <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  12.  
  13.             <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  14.  
  15.             <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  16.  
  17.             <p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</p>
  18.  
  19.         </div>
  20.  
  21.     </div>
  22.  
  23.     <div class="footer">
  24.  
  25.         <p>This is footer</p>
  26.  
  27.     </div>
  28.  
  29. </body>

主要CSS样式如下：

  1. .wrapper{
  2.  
  3.     min-height: calc(100vh - 50px);
  4.  
  5.     box-sizing: border-box;
  6.  
  7. }

注：50px为footer的高度，calc()运算符前后都需要保留一个空格。

结果我就不贴了，大家自行脑补，跟上面的都差不多。。。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号