html关于强制显示、隐藏浏览器的滚动条
2011-07-05 17:49
375 查看
刚在做个网站,有个页面与其他页面显示有点出入,
通过观察和调试,发现是该页面的垂直高度未溢出,
无法调用出垂直滚动条,
从而导致相对于其他页面居中时相差几个像素距离,
使得页面效果不够友好。
解决方案:将所有页面强制添加或者隐藏浏览器的滚动条即可。
相关css 代码如下:
//强制显示滚动条:
html { overflow: scroll; }
//强制隐藏滚动条:
html { overflow: hidden; }
//隐藏IE的水平滚动条:
html { overflow-x: hidden; }
//隐藏IE的垂直滚动条:
html { overflow-y: hidden; }
//强制显示IE的水平滚动条:
html { overflow-x: scroll; }
//强制显示IE的垂直滚动条:
html { overflow-y: scroll; }
//强制显示Mozilla的水平滚动条:
html { overflow:-moz-scrollbars-horizontal; }
//注意: 仅仅强制显示水平滚动条. 也就是说, 即使需要显示垂直滚动条时, 垂直滚动条也不会出现.
//强制显示Mozilla的垂直滚动条:
html { overflow:-moz-scrollbars-vertical; }
//注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.
通过观察和调试,发现是该页面的垂直高度未溢出,
无法调用出垂直滚动条,
从而导致相对于其他页面居中时相差几个像素距离,
使得页面效果不够友好。
解决方案:将所有页面强制添加或者隐藏浏览器的滚动条即可。
相关css 代码如下:
//强制显示滚动条:
html { overflow: scroll; }
//强制隐藏滚动条:
html { overflow: hidden; }
//隐藏IE的水平滚动条:
html { overflow-x: hidden; }
//隐藏IE的垂直滚动条:
html { overflow-y: hidden; }
//强制显示IE的水平滚动条:
html { overflow-x: scroll; }
//强制显示IE的垂直滚动条:
html { overflow-y: scroll; }
//强制显示Mozilla的水平滚动条:
html { overflow:-moz-scrollbars-horizontal; }
//注意: 仅仅强制显示水平滚动条. 也就是说, 即使需要显示垂直滚动条时, 垂直滚动条也不会出现.
//强制显示Mozilla的垂直滚动条:
html { overflow:-moz-scrollbars-vertical; }
//注意: 仅仅强制显示垂直滚动条. 也就是说, 即使需要显示水平滚动条时, 水平滚动条也不会出现.
相关文章推荐
- html关于强制显示、隐藏浏览器的滚动条,解决由于高度变化带来的滚动条影响页面宽度的问题
- html关于强制显示、隐藏浏览器的滚动条
- html关于强制显示、隐藏浏览器的滚动条
- html关于强制显示 隐藏浏览器的滚动条
- (转)强制显示、隐藏浏览器的滚动条
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
- 强制显示隐藏浏览器滚动条css
- 关于浏览器滚动条的显示
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
- 在 IE 浏览器中,使用 bootstrap 使得页面滚动条浮动显示,自动隐藏,自动消失
- HTML 中让DIV不随滚动条滚动,使终显示在浏览器的固定位置
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
- android 关于在ListView 显示和隐藏checkboxes的实现。
- 判断浏览器及其版本,如果是IE10及其以下版本统一这样处理 显示或隐藏下拉框
- 关于iOS tabBar隐藏和显示问题
- 在浏览器中正确显示google svn的html页面,而不是源代码
- html jquery显示和隐藏的小例子
- ie中隐藏textarea的滚动条显示
- html中设置超出部分自动显示滚动条
- js设置html区域隐藏和显示