html - cssでフッターを画面下部にくっつける方法

Question

私はphonegapアプリを作っています。フッターにタブを作成しようとしていて、画面の下部に貼り付けたいので、ユーザーが下にスクロールしてもそこにとどまり、常に表示されるようにします。現在のコードではタブ ナビゲーションが下部に表示されますが、スクロールするとタブも上下にスクロールします。どうすれば修正できますか？

これが私のコードです

<header>
    header
</header>
<section class="contents">
</section>
<footer>
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Photo</a></li>
    </ul>
</footer>

ここに私のcssがあります

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border: 1px solid red; }
  footer .nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%; }
      footer .nav li {
      display: inline-block;
      margin-right: -0.2em;
      height: 20%;
      padding: 5% 10.7%;
      background: #ccc; }
         footer .nav li a {
         width: 100%;
         height: 100%;
         text-decoration: none; }