桌面导航栏粘性顶部到移动导航栏粘性底部

Question

我使用Skeleton 作为我的 CSS 框架

目前我有一个导航栏，它贴在 PC 桌面视图的顶部（即页面在其下方滚动）。代码如下：

<div style="height:50px">
 <div id="fixed-nav-bar">
  <div class="container" id="nav">

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>
 </div>
</div>



#fixed-nav-bar {
      position:fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100%;
      height: 50px;
      background-color:linen;
  }

#nav ul {
    display: -moz-box;
    display: -webkit-box;
    display: box;
    list-style-type: none;
    text-align: center;
  }

#nav ul li {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
  }

我的问题：我怎样才能使它在移动设备（即手机）中查看时，导航栏移动到底部（以便在单手模式下轻松使用）并保持粘性？

我猜我需要使用媒体查询。我如何在这里使用它们？

Answer 1

这是我的解决方案：使用bottom:0;，您可以将#fixed-nav-bar 放在页面底部。只需将 960px 替换为您不会#fixed-nav-bar 到底部的设备的选择宽度。

@media screen and (max-width: 960px) {
    #fixed-nav-bar {
        top: inherit;
        bottom: 0;
    }
}