目标：
实现左边侧边栏固定，右边内容区自适应
侧边栏内容较少时背景100%高度展示
侧边栏内容较多时可以滚动，且不让显示滚动条(显示太丑)
内容区较少时不出现滚动条，较多时可以滚动
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
height: 100%;
100%;
}
.left {
180px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
}
.menu {
min-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px;
overflow-y: scroll;
background-color: yellow;
}
.content {
min-height: 100%;
margin-left: 180px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="left">
<ul class="menu">
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</div>
<div class="content">
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
</div>
</div>
</body>
</html>
