我是一個網易云粉，有沒有發現網易云音樂兩邊的滾動條是互不相干的，而且頭部和底部都是固定的，這是如何實現的呢？先看個圖吧。

網易云音樂的頁面

其實要實現這樣一個內聯滾動條不難。我們可以先從實現一個內聯滾動條開始實現。

實現方法：

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我是底部 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html5内联框去滚动条,如何优雅的实现内联滚动条（前端底部固定方法 ）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。