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>