我有一个小问题,试图保持我的。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是对话框窗口宽度的一半。

这是唯一对我有效的方法。

我不能对第一个答案发表评论,而且已经很久了……但这个演示有一个问题:

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;
}

Safari和Chrome等Webkit浏览器在计算宽度时从可见页面宽度中减去滚动条宽度:100%或100vw。更多信息请参阅DM Rutherford的滚动和页面宽度。

试着用overflow-y: overlay代替。

如果你有一些容器,你正在使用作为包装你的网站内容,比如导航和页脚,你可以添加以下内容:

min-height: 101vh;

这将“延长”你的页面1vh,以确保滚动条永远不会消失,宽度保持不变。

我在Chrome浏览器上也遇到了同样的问题。只有在滚动条始终可见的情况下才会发生这种情况。(在一般设置中找到)我有一个模式,当我打开模式时,我注意到……

body {
    padding-left: 15px;
}

被添加到主体中。为了阻止这种情况发生,我补充道

body {
    padding-left: 0px !important;
}