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; }