垂直滚动条对居中布局的影响

典型的居中布局是让body的margin和padding为0,然后让内容(如<div id= content/>) 居中。

这种做法的问题是:页面元素在有垂直滚动条和无垂直滚动条时,相对于屏幕的位置不同。

比如你的屏宽是2000,内容宽度是1000; 无滚动条时,内容最左端相对于屏幕左端的偏移量就是500 ([2000-1000]/2) .

有滚动条时,由于滚动条本身要占一定宽度(比如说20),则新的偏移量将是 (2000-20-1000)/2 =490.

如果用户从一个无滚动条页面(比如数据很少的列表页面)切换到一个有滚动条的页面(数据很多的列表页面),就会感觉到明显的页面的扯动,用户体验很不好。

要解决这个问题,可以把居中布局改成按居左布局+固定偏移量,baidu的搜索页就是这样布局的。如果想继续用居中布局,有一种办法是强制全站总是出现垂直滚动条:

html {overflow-y: scroll;}  /*这是css3属性,有的浏览器可能不支持*/

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.