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>