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