position:fixed的top:0與bottom:0配合的妙用（固定導航欄）
幾乎每個專案都會有導航欄，橫向的導航欄定位在頂部很常見也很好實現，但是側邊的導航欄也不少，實現起來相對沒那麼容易，主要是側邊導航欄的高度問題，我最開始製作側邊導航欄是，當導航欄內容不夠整屏高度時，導航欄高度就會缺失。
我第一想法是js動態賦值高度及min-height的配合使用，效果也能實現，但是太麻煩，今天介紹一下position:fixed的top:0與bottom:0配合，即可快速實現完美的側邊欄。
完整程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fixed的top:0與bottom:0的巧妙使用</title> <style> *{margin:0;padding:0;} .wrapper{width:100%;} nav{width:220px;background:#297bc7;position:fixed;top:0;bottom:0;left:0;} li{padding:5px 8px;list-style:none;} .content-wrp{width:calc(100% - 220px);margin-left:220px;background:pink;} .content{max-width:600px;margin:0 auto;} </style> </head> <body> <div class="wrapper"> <nav> <ul> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul> </nav>
<div class="content-wrp"> <div class="content"> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> </div> </div> </div> </body> </html>