如何使用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; }