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

我是底部

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

html5如何文本框去角,HTML5如何实现尖角号
本篇教程探讨了HTML5如何实现尖角号,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 首先,来写一个简单的代码: html> Title .arrow ...
百度站内搜索框自己定义样式、显示方式...（瓜头酱油的发现）供站内搜索入门者围观
这次需要做一个百度的站内搜索, 刚开始做这个东西什么都不知道,心里急了, 公司的人看我比较急也给我指定了一下,但是全公司就我一个PHP程序员, 还是我自己摸索吧, 哈哈哈哈刚好现在找到了资料... ...
java怎么在文本框里输入文件,java中如何把窗体内文本框输入的内容保存到文件内？...
java中如何把窗体内文本框输入的内容保存到文件内? 1.获取文本框中的文本 2.将内容写入文件内具体示例如下所示: public static void main(String [] args){ ...
基于HTML5的移动Web应用——Bootstrap 样式案例：制作美联英语在线VIP页面微电影
需求说明使用container.row等栅格系统的知识布局响应式的网页,需要适配中等屏幕.小屏幕.超小屏幕使用.img-responsive设置响应式图片,使之适应不同屏幕的终端使用.img-t ...
滚动条禁止_Axure 教程：不可见滚动条的页面滚动效果
在设计产品原型的过程中,经常会遇到这样的一种场景--所要展示的内容,超出了当前可视页面范围.遇到这种情况,通常使用Axure动态面板的滚动条设置来解决. 产品原型设计是产品经理每日或周期性必须经历的事 ...
计算机专业内卷严重,考研，这6个专业“内卷”严重，竞争较为激烈！
文|学个习原创文章,欢迎转发分享! 我们常常能听见一种说法,叫"选择大于努力",如果将其用在考研上,那也是相当贴切. 抛开学校不说,就考研专业,也是差别很大,有些专业能轻松上岸, ...
datagridview滚动条自动滚动_Win32编程基础之滚动条
(图片来源:游戏<ATRI> 通过使用滚动条,窗口可以显示比它大的文档或图片,用户可以滚动用户区中的数据对象来看到对象超出窗口边界的部分. 如果窗口的用户区比窗口的边框要大,窗口应该使用滚 ...
转：jsp内置对象中page与pageContext与el内置对象pageScope与pageContext区别
原文地址:jsp内置对象中page与pageContext与el内置对象pageScope与pageContext区别首先说明一下jsp9大内置对象 (1)HttpSession类的session对 ...
绿联扩展坞拆解_我们拆了绿联这款USB
随着笔记本的超薄化,曾经那些常见的接口也慢慢的从笔记本上消失,而正因如此,扩展坞市场才得以发展起来.为了顺应潮流满足市场的需求,UGREEN绿联近期推出一款USB-C多功能拓展坞,这款产品配有多个不同 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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