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

2. 管理系统

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

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

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

回到内滚动布局本身。

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

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

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

其中page扮演传统页面的角色。这是一个预留设计，防止为了满足某些功能或交互体验需要，一个页面同时出现多个类似结构页面的情况。或者这么说吧，把所有页面内容放在一个page中，此时page就好比一个可以移动的房子，回头你跳槽来腾讯了，房子可以一起带过来，原来的位置可以被其他房子代替。但是，你如果直接放在中，由于只能是一个，不动产，此时想要做整体迁移，难度就较大，同时项目几乎成型，全局修改成本高高风险大。不过凡事都有两面性，这样的折腾可以减少你白头发的数目，因为你会因操劳过度头发直接脱掉的。

page相关CSS如下：

.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效果。

（编辑：佛山站长网）

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