右侧滚动条挤压样式
程序员文章站
2022-07-03 21:44:12
...
昨天在做一个页面的时候,碰到一个小奇葩问题。当页面的宽度小于屏幕宽度时,页面当然右侧是没有滚动条的。但是当内容一多,右侧肯定会出现滚动条,此时,这个滚动条就会占用一部分宽度,但就是这个宽度就把原有的样式挤压得变形了。
我是这么解决的,既然这个页面会根据页面的宽度的不同而使右侧出现滚动条,那么索性一开始就让这个滚动条显示出来,也就是让滚动条始终可见,代码如下:
<style type="text/css">
body{
overflow: scroll;
}
</style>
给body加上这个样式后,一开始页面的宽度小于屏幕时,滚动条也会出现,但是隐隐约约的,基本看不见,这个效果还是可以的,当页面宽度大于屏幕时,滚动条就很明显了,可拖动了。
对于这个问题,应该还有其他的办法,但我没亲自测试过。就是用js获取滚动条的宽度,然后在进行页面设计的时候,给它预留一个这个宽度。
上一篇: 颜色对话框的使用
下一篇: Python实现算命老先生算姓氏问题
推荐阅读
-
jquery实现Li滚动时滚动条自动添加样式的方法_jquery
-
不知大家遇到过这种问题么,一个层宽度设为100%,并设置背景图片,在浏览器中浏览,缩小窗口到滚动条出现,然后拖动滚动条到右侧,右侧的区域变成空白,怎么解决?_html/css_WEB-ITnose
-
CSS滚动条样式如何兼容IE8和Chrome浏览器?
-
如何用CSS修改浏览器滚动条的样式(实例详解)
-
CSS3改变浏览器滚动条样式
-
CSS3自定义滚动条样式的示例代码
-
css横向滚动条样式(网页横向滚动条设置)
-
CSS3改变浏览器滚动条样式
-
Android ListView隐藏右侧滚动条功能
-
css横向滚动条样式(网页横向滚动条设置)