转载：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: (底部的高度)