欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

右侧滚动条挤压样式

程序员文章站 2022-07-03 21:44:12
...

        昨天在做一个页面的时候,碰到一个小奇葩问题。当页面的宽度小于屏幕宽度时,页面当然右侧是没有滚动条的。但是当内容一多,右侧肯定会出现滚动条,此时,这个滚动条就会占用一部分宽度,但就是这个宽度就把原有的样式挤压得变形了。

        我是这么解决的,既然这个页面会根据页面的宽度的不同而使右侧出现滚动条,那么索性一开始就让这个滚动条显示出来,也就是让滚动条始终可见,代码如下:

<style type="text/css">
        body{
		overflow: scroll;
	}
</style>

         给body加上这个样式后,一开始页面的宽度小于屏幕时,滚动条也会出现,但是隐隐约约的,基本看不见,这个效果还是可以的,当页面宽度大于屏幕时,滚动条就很明显了,可拖动了。

        对于这个问题,应该还有其他的办法,但我没亲自测试过。就是用js获取滚动条的宽度,然后在进行页面设计的时候,给它预留一个这个宽度。