让footer部分始终位于页面底部的方法

最近做网站遇到一类问题，怎么让页脚始终位于页面底部？当页面内容过少时，页脚会随着内容浮动。怎么做才能让页脚始终位于页面底部呢？

最常见的一种方法是让footer绝对定位在content的底部，具体代码如下：

html部分：

1 <div id="wrapper">
2     <div class="header"></div>
3     <div class="container"></div>
4     <div class="footer"></div>
5 </div>

 css部分：

 1  html,body {height: 100%;}
     #wrapper {
 2       min-height: 100%;
 3       height: auto !important;
 4       height: 100%;
 5       position: relative;
 6   }
 7   .container {
 8       padding: 20px 80px 160px;
 9   }
10  .footer {
11      position: absolute;
12      left: 0;
13      bottom: 0;
14      width: 100%;
15      height: 100px;
16      padding-top: 40px;
17      background: #484848;
18      color: #fff;
19  }

 

转载于:https://www.cnblogs.com/misaki/archive/2013/06/08/3127263.html