首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2013-07-16 
垂直滚动条对居中布局的影响典型的居中布局是让body的margin和padding为0,然后让内容(如div id content/

垂直滚动条对居中布局的影响
典型的居中布局是让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属性,有的浏览器可能不支持*/

热点排行