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

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

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

html部分：

<div id="wrapper">
    <div class="header"></div>
    <div class="container"></div>
    <div class="footer"></div>
</div>

 css部分：

 html,body {height: 100%;}
     #wrapper {
      min-height: 100%;
      height: auto !important;
      height: 100%;
      position: relative;
  }
  .container {
      padding: 20px 80px 160px;
  }
 .footer {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 100px;
     padding-top: 40px;
     background: #484848;
     color: #fff;
 }