网站建设运维策划,最快网站备案,公司网站对比那几点优势,wordpress feed插件我是一个网易云粉#xff0c;有没有发现网易云音乐两边的滚动条是互不相干的#xff0c;而且头部和底部都是固定的#xff0c;这是如何实现的呢#xff1f;先看个图吧。网易云音乐的页面其实要实现这样一个内联滚动条不难。我们可以先从实现一个内联滚动条开始实现。实现方…我是一个网易云粉有没有发现网易云音乐两边的滚动条是互不相干的而且头部和底部都是固定的这是如何实现的呢先看个图吧。网易云音乐的页面其实要实现这样一个内联滚动条不难。我们可以先从实现一个内联滚动条开始实现。实现方法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中间了只要设置一个overflowauto就可以实现滚动了。看一下效果吧。效果图那如果要实现网易云那样的双边滚动效果呢想一想是不是其实不难我们只要在中间的内容区域再添加一个就可以了然后两个部分做一个简单的布局就可以了。看代码吧。我是头部//这是侧边栏我是内容111我是内容211我是内容311我是内容411我是内容511//这是主体内容我是内容111我是内容211我是内容311我是内容411我是内容511我是底部
