我是一个网易云粉，有没有发现网易云音乐两边的滚动条是互不相干的，而且头部和底部都是固定的，这是如何实现的呢？先看个图吧。
网易云音乐的页面
其实要实现这样一个内联滚动条不难。我们可以先从实现一个内联滚动条开始实现。
实现方法：
calc的使用
flex布局
基本的逻辑思路是：
先看代码实现吧。
基本的HTML代码块：
CSS样式设置：
header的样式设置：
.hq {
width:100%;
height:40px;
background: peru;
}
footer的样式设置
.footer {
position: fixed;
bottom: 0px;
width:100%;
height:40px;
background: palevioletred;
}
container的样式设置：
.container {
width: 100%;
height:calc(100vh - 80px);
overflow: auto;
}
使用要求：
header 和 footer的高度要知道，需要提前设置；
中间内容区域的高度取决于header footer的高度
原理讲解：
首先，calc是CSS 中的一个样式属性，用来指定元素的宽度或者高度，100vh是指窗口的高度，100vh就是指整个窗口的高度，之前我们或许会用height:100%来设置高度，但是会有局限，因为body元素也得设置100%才有效。那么100vh则可以很好地解决这个问题；
设置内容区域高度的时候，我们用 height:calc(100vh - 80px);其中80px就是header和footer的总高度之和。
footer只要给设置成fixed定位方式，bottom设置为0 则可以固定在底部了。
这样一来，中间内容区域的高度就刚好卡在header和footer中间了，只要设置一个overflow：auto就可以实现滚动了。
看一下效果吧。
效果图
那如果要实现网易云那样的双边滚动效果呢？
想一想，是不是其实不难，我们只要在中间的内容区域再添加一个就可以了，然后两个部分做一个简单的布局就可以了。看代码吧。
1490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
