简介

bootstrap自带的nav底栏是固定位置的，当内容超过一屏的时候，也会显示，这会遮挡不少内容。 本文介绍如何实现footer一直在内容最后，当内容不够时，置于页面底部。

页面整体结构

页面整体结构如下，这里主要需要设置html、body、body-wrapper、footer这四个样式。 

<html>
   <head>
   </head>
   <body>
      <div id="body-wrapper">
         <nav></nav>
         <div class="content"></div>
         <div class="footer"></div>
      </div>
   </body>
</html>

## 设置html、body高度为100%。
```css
html, body {
    margin: 0px;
    height: 100%;
}

设置body-wrapper高度为body的100%高度。

#body-wrapper {
  position: relative;
  height: auto;
  min-height: 100%;
}

设置footer位置绝对固定，距离底部位置为0。

.footer {
    position: absolute;
    bottom: 0;
}