桌面導航欄粘頂部粘底

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到頁面的底部。只需將960像素替換爲您不想使用#fixed-nav-bar的設備的寬度即可。

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