问题描述:

之前自己仿写了一个聊天机器人的小项目,页面的高度会随着聊天数量的增加而变大,进而出现滚动条,滚动条默认的宽度是17px,所以每次出现滚动条右边的内容区域就会被挤压,影响布局

解决办法:

1.使用margin-right:calc(100% - 100vw );

100% 是浏览器的可用宽度 , 100vw是浏览器的内部宽度window.innerWidth 是包含滚动条在内的宽度,在没有滚动条的时候margin-right:0;没哟影响,在有滚动条的时候,margin-right:-17px,用来抵消滚动条占据的17px 宽度,

//css* {margin: 0;padding: 0;}html {overflow-y: auto;overflow-x: hidden;}.container {height: 2000px;margin-right: calc(100% - 100vw);/* padding: 17px; */ //注释方便看效果background-color: #00b83f;text-align: right;}//html
我是容器内容

2.使用 overflow-y: overlay;

这个属性是新出的,文档暂时还查不到,兼容性也不是很好,在需要隐藏滚动条的容器内部使用,

//css* {margin: 0;padding: 0;}.container {margin: 100px auto;width: 200px;height: 100px;/* padding-right: 17px; *//* box-sizing: border-box; */ //注释方便看效果background-color: #00b83f;text-align: right;overflow: auto;overflow-y: overlay;}.inner {width: 100%;height: 300px;background-color: pink;}//html
我是容器内容

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！