因为滚动条导致每页的居中元素位置不统一的解决方法

比如多个页面, 顶部共用1个menu, menu的宽度是800, 设置为根据页面宽度居中

会发现在有的页面, 这个menu偏移了

页面高度不满1屏时, 浏览器右侧不显示滚动条

高度满1屏时, 会显示滚动条

这导致了页面的宽度不一致, 继而导致那个居中的menu位置偏移

解决方法是让右侧导航条一直显示, 如下

Step1 让menu先隐藏, 示例代码如下

<div id="menu" style="display:none">

Step2 添加如下js (使用jQuery)

<script>
        //给任何页面都多加1像素的高度,那个右侧导航条就一直显示
        $('html').height($('html').height()+1)

        //增加高度后, 再让菜单显示, 防止菜单闪动
        $('#menu').show()
</script>