我有一个小问题，试图保持我的。html页面在Chrome上的宽度一致。
例如，我有一个页面(1)，其中有很多内容超出了视口的高度，因此该页面(1)上有一个垂直滚动条。在页面(2)上，我有相同的布局(菜单，div，…等)，但内容更少，所以没有垂直滚动条。
问题在于，在第(1)页上，滚动条似乎将元素稍微推到左边(增加宽度?)，而在第(2)页上，所有内容似乎都处于正中央。
我仍然是HTML/CSS/JS的初学者，我相信这并不难，但我没有运气找到解决方案。它在IE10和FireFox(无干扰滚动条)上都能正常工作，我只在Chrome上遇到过。
当前回答
我的头部导航也有类似的问题。我的大多数页面都有足够的内容来触发滚动，除了一页。
我的头部导航有一个flexContainer，有2个子容器(中间有空格)。flexContainer有一个5rem左右填充。
头{padding-left: calc(100vw - 100%;)} 通过添加滚动条，将其添加到头部，从而使内容处于中心位置 向左的宽度。元素现在居中，但我们有 有效地缩小页眉宽度滚动条宽度。
flexContainer {padding: 0rem calc(5rem - calc((100vw - 100%)/2));} 我添加回滚动条宽度减少 flexContainer填充。
这确保我的内容保持在适当的位置，无论是否触发滚动。
其他回答
.modal-dialog {
position: absolute;
left: calc(50vw - 300px);
}
300px是对话框窗口宽度的一半。
这是唯一对我有效的方法。
你所需要做的就是添加:
html {
overflow-y: scroll;
}
在你的CSS文件中，无论是否需要，都会有滚动条，尽管你不能滚动。
这意味着两者的视口宽度相同。
如果你有一些容器，你正在使用作为包装你的网站内容，比如导航和页脚，你可以添加以下内容:
min-height: 101vh;
这将“延长”你的页面1vh，以确保滚动条永远不会消失，宽度保持不变。
body {
width: calc( 100% );
max-width: calc( 100vw - 1em );
}
工作与默认滚动条以及。 可以添加:
overflow-x: hidden;
以确保水平滚动条对父帧保持隐藏。除非你的客户希望你这么做。
我不能对第一个答案发表评论，而且已经很久了……但这个演示有一个问题:
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
b.prop('scrollHeight')总是等于b.height()，
我认为应该是这样的:
if(b.prop('scrollHeight')>window.innerHeight) ...
最后我推荐一个方法:
html {
overflow-y: scroll;
}
:root {
overflow-y: auto;
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
