问题描述:
之前自己仿写了一个聊天机器人的小项目,页面的高度会随着聊天数量的增加而变大,进而出现滚动条,滚动条默认的宽度是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
<div class="container">
<div class="inner">
<h1>我是容器内容</h1>
</div>
</div>
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
<div class="container">
<div class="inner">
<h1>我是容器内容</h1>
</div>
</div>
