sticky_footer · 天坑陈小傻

> 在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送，我们看到的效果就如下面两张图这样。这种效果基本是无处不在的，很受欢迎。 ``` <!DOCTYPE html> <html> <head> <title>练习</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <style> *{ margin:0; padding:0; list-style:none; } /* 设置高度(*****) */ html,body{ height:100%; } .clearfix{ display:inline-block; } .clearfix:after{ display:blcok; content:'.'; height:0; line-height:0; clear:both; visibility:hidden; } .wapper{ min-height:100%; } .main{ margin-top:64px; padding-bottom:64px; } .close{ position:relative; width:32px; height:32px; margin:-64px auto 0 auto; clear:both; font-size:32px; } </style> </head> <body> <div class='wapper clearfix'> <div class='main'> 本页面是用来介绍怎么使用Sticky Footer代码来做到页脚紧贴在页面的底部,还包括怎么把它应用在多列悬浮页面上,以及怎么加header..本页面是用来介绍怎么使用Sticky Footer代码来做到页脚紧贴在页面的底部,还包括怎么把它应用在多列悬浮页面上,以及怎么加header..本页面是用来介绍怎么使用Sticky Footer代码来做到页脚紧贴在页面的底部,还包括怎么把它应,以及怎么加head绍怎么使用Sticky Footer代码来做到页脚紧贴在页面的底部,还包括怎么把它应用在多列悬浮页面上,以及怎么加header..本页面是用来介绍怎么使用Sticky Footer代码来做到页脚紧贴在页面的底部,还包括怎么把它应,以及怎么加header..本页面是用来介绍怎么使用Sticky Footer代码来做到页脚紧贴在页面的底部,还包括怎么把它应用在多列悬浮页面上,以及怎么加header..本页面是用来介绍怎么使用Sticky Footer代码来做到页脚紧贴在页面的底部,还包括怎么把它应用在多列悬浮页面上,以及怎么加header.. </div> </div> <div class='close'> x </div> </body> </html> ```