css sticky footer

转载：http://www.w3cplus.com/css3/css-secrets/sticky-footers.html?utm_source=tuicool&utm_medium=referral

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

链接：https://github.com/zhaobao1830/dangjianweb2

代码：

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="ie=edge">
 6   <title>Title</title>
 7   <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no">
 8   <link rel="stylesheet" type="text/css" href="../css/userinformation.css">
 9 </head>
10 <body>
11    <div class="userinformation">
12     <div class="conInfor">
13       <div class="uInforContent">
14         <div class="uInforTop">
15           <div class="goBackZb">
16             <img src="../images/goBack2.png"/>
17           </div>
18           <div class="userLogo">
19             <img src="../images/userLogo.png"/>
20           </div>
21           <div class="username">
22             <p>admin</p>
23           </div>
24           <div class="loginLastDate">
25             <p>上次登录时间：</p>
26             <span>2018-01-01</span>
27           </div>
28         </div>
29         <div class="uInfor-content-division"></div>
30         <div class="uInforCon">
31           <div class="topicses uInforConLlist">
32             <p class="left">主题数量</p>
33             <p class="right">300</p>
34           </div>
35           <div class="topicses uInforConLlist">
36             <p class="left">帖子发布数量</p>
37             <p class="right">300</p>
38           </div>
39           <div class="topicses uInforConLlist">
40             <p class="left">论坛积分</p>
41             <p class="right">300</p>
42           </div>
43         </div>
44       </div>
45     </div>
46     <div class="loginOut">
47       <a href="#">退出</a>
48     </div>
49 </div>
50    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
51    <script type="text/javascript" src="../js/util.js"></script>
52    <script type="text/javascript">
53      window.onload=function () {
54        computedFontSize()
55      }
56      window.onresize=function () {
57        computedFontSize()
58      }
59    </script>
60 </body>
61 </html>

  1 body,
  2 html {
  3   line-height: 1;
  4   font-family: '65B96B6351704EAD9ED1', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
  5 }
  6 input::-webkit-input-placeholder {
  7   color: #bbb;
  8 }
  9 * {
 10   margin: 0;
 11   padding: 0;
 12 }
 13 .userinformation {
 14   position: fixed;
 15   top: 0;
 16   left: 0;
 17    100%;
 18   height: 100%;
 19   overflow: auto;
 20 }
 21 .userinformation .conInfor {
 22   min-height: 100%;
 23 }
 24 .userinformation .conInfor .uInforContent {
 25   padding-bottom: 1.2rem;
 26 }
 27 .userinformation .conInfor .uInforContent .uInforTop {
 28    100%;
 29   height: 5.733333333333333rem;
 30   background-image: url(../images/b3269a8f4799f6d00d1ba2e2915cacbb.png);
 31   background-repeat: no-repeat;
 32   background-position: center;
 33   background-size: cover;
 34   overflow: hidden;
 35 }
 36 .userinformation .conInfor .uInforContent .uInforTop .goBackZb {
 37   margin-top: 0.4rem;
 38   margin-left: 0.4rem;
 39    0.293333333333333rem;
 40   height: 0.52rem;
 41 }
 42 .userinformation .conInfor .uInforContent .uInforTop .goBackZb img {
 43    0.293333333333333rem;
 44   height: 0.52rem;
 45   float: left;
 46 }
 47 .userinformation .conInfor .uInforContent .uInforTop .userLogo {
 48   margin-top: 0.133333333333333rem;
 49   height: 2.746666666666667rem;
 50   text-align: center;
 51 }
 52 .userinformation .conInfor .uInforContent .uInforTop .userLogo img {
 53    2.746666666666667rem;
 54   height: 2.746666666666667rem;
 55 }
 56 .userinformation .conInfor .uInforContent .uInforTop .username {
 57   margin-top: 0.266666666666667rem;
 58   text-align: center;
 59 }
 60 .userinformation .conInfor .uInforContent .uInforTop .username p {
 61   font-size: 0.4rem;
 62   color: #fff;
 63 }
 64 .userinformation .conInfor .uInforContent .uInforTop .loginLastDate {
 65   margin-top: 0.533333333333333rem;
 66   text-align: center;
 67   font-size: 0.4rem;
 68   color: #fff;
 69 }
 70 .userinformation .conInfor .uInforContent .uInforTop .loginLastDate p {
 71   display: inline-block;
 72 }
 73 .userinformation .conInfor .uInforContent .uInfor-content-division {
 74   height: 0.266666666666667rem;
 75   background-color: #ddd;
 76 }
 77 .userinformation .conInfor .uInforContent .uInforCon .uInforConLlist {
 78   overflow: hidden;
 79   padding-left: 0.4rem;
 80   padding-right: 0.4rem;
 81   padding-top: 0.533333333333333rem;
 82   padding-bottom: 0.533333333333333rem;
 83   border-bottom: 1px solid #ddd;
 84   font-size: 0.4rem;
 85 }
 86 .userinformation .conInfor .uInforContent .uInforCon .uInforConLlist .left {
 87   float: left;
 88   color: #322222;
 89 }
 90 .userinformation .conInfor .uInforContent .uInforCon .uInforConLlist .right {
 91   float: right;
 92   color: #777;
 93 }
 94 .userinformation .loginOut {
 95    100%;
 96   margin-top: -1.2rem;
 97   background-color: #ddd;
 98   height: 1.2rem;
 99   line-height: 1.2rem;
100   text-align: center;
101 }
102 .userinformation .loginOut a {
103   font-size: 0.48rem;
104   color: #222;
105 }

要实现这个效果，一定要用这样的结构

 1 <div class="content">
 2   <div class="detail">
 3     <div class="detail-show">
 4       这里面放真实的数据
 5     </div>
 6   </div>
 7   <div class="footer">
 8     底部
 9   </div>
10 </div>

核心代码：

content 全屏
detail: min-height 100%
detail-show: padding-bottom: (底部的高度)
footer: margin-top: (底部的高度)