html5内联框去滚动条,如何优雅的实现内联滚动条（前端底部固定方法 ）

我是一个网易云粉，有没有发现网易云音乐两边的滚动条是互不相干的，而且头部和底部都是固定的，这是如何实现的呢？先看个图吧。

网易云音乐的页面

其实要实现这样一个内联滚动条不难。我们可以先从实现一个内联滚动条开始实现。

实现方法：

calc的使用

flex布局

基本的逻辑思路是：

先看代码实现吧。

基本的HTML代码块：

我是头部

我是内容111

我是内容211

我是内容311

我是内容411

我是内容511

我是底部

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就可以实现滚动了。

看一下效果吧。

效果图

那如果要实现网易云那样的双边滚动效果呢？

想一想，是不是其实不难，我们只要在中间的内容区域再添加一个就可以了，然后两个部分做一个简单的布局就可以了。看代码吧。

我是头部

//这是侧边栏

我是内容111

我是内容211

我是内容311

我是内容411

我是内容511

//这是主体内容

我是内容111

我是内容211

我是内容311

我是内容411

我是内容511

我是底部