如何实现内滚动布局
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现内滚动布局相关的知识,希望对你有一定的参考价值。
既然是内滚动,就有必要干掉浏览器原生<html>
的滚动条,这个很简单:
html { overflow: hidden; }
HTML主结构示意如下:
- body
- -- page
- -- header
- -- side
- -- content
我们可以利用绝对定位元素的拉伸特性,使内滚动容器高度自适应匹配。
.page { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
应该很好理解,绝对定位,满屏拉伸,等同于:
.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
由于省了好几个字节,所以我舍弃了IE6使用了上面写法。
对于固定的头部header
或者固定的侧边side
, 你可以使用语义明确的position:fixed
定位,或者直接使用position:absolute
,因为滚动容器跟他们平级,所以,absolute
其实就是fixed
效果。
讲到这里就不得不说点题外话,很多人会遇到移动端position:fixed
的底部输入框定位的头疼问题,如何解决?就是使用本文介绍的内滚动布局,然后底部使用position:absolute
模拟fixed
效果。
代码方面,同样就是拉伸拉伸:
- .header { height: 62px; position: absolute; top: 0; right: 0; left: 0; }
- .side { width: 200px; position: absolute; top: 62px; bottom: 0; left: 0; }
最后就是高能的content
, 还是一样的套路:
.content { position: absolute; top: 62px; right: 0; bottom: 0; left: 200px; overflow: auto; }
主体内容全部都在content
里面玩耍。于是,一个高宽均自适应浏览器窗体的内滚动布局就成型了。
参考:https://isux.tencent.com/inner-scroll-layout.html
以上是关于如何实现内滚动布局的主要内容,如果未能解决你的问题,请参考以下文章