浅议内滚动布局的概念与实现方法

2. 管理系统

“管理系统”意味着站点以强交互为主，会有很多类似办公软件的交互操作在里面。如果是更偏重浏览的站点，例如企业QQ官网，显然，传统的垂直瀑布式的网站是更适合的，滚动浏览，再滚动，再浏览。但是，企业管理系统如此庞大，操作如此频繁，交互如此之多，传统的上下式网站显然很难让用户用得非常得心应手。下图为以前企业QQ账户中心组织结构页面（测试页面）的真容：

看着此页面，立马让我想起了6年前刚毕业那会的青葱岁月，那时候的页面的基本上就是这样的调调，小小的空间里有着小小的世界。时代发展，再辉煌的过去，如果没有改变，终将会被埋汰。

正是由于以上两点，设计师设计的时候，大胆创新，设计成了全屏自适应、半响应、类PC软件风格(内滚动)的管理站点，下图为上面老页面同样数据的新测试页面截图：

回到内滚动布局本身。

新版企业账户中心全站，顶部以及左侧固定，不跟随滚动，右侧主体内滚动，如何实现呢？

由于企业产品不用管0.4%的IE6用户，因此，事件就变得简单地多了。我们可以利用绝对定位元素的拉伸特性，使内滚动容器高度自适应匹配。HTML主结构示意如下：

body -- page -- header -- side -- content

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!