添加滚动时，如何防止背景图像移动

Question

我有一个有两个页面的网站。两个页面共享相同的CSS正文属性。

当你点击主页上的按钮时，它会带你进入一个带有滚动条的页面。当显示此页面时，背景向左收缩/移动一点点，以适应滚动条的出现。我该如何阻止这种行为？

我希望背景图像是完全静态的。下面是CSS的一个小片段。

html {
min-height: 100%;
cursor: url('Pictures/glove-lg.png'), auto;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(Pictures/backgroundDala.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}

Answer 1

避免这种情况的唯一方法是对内容等于或不超过100%高的页面上的body使用overflow-y: scroll。

这样，每个页面上都会显示一个垂直的滚动条，因此背景将保持不变。这不是一个很好的解决方案，但也是唯一一个保持背景图像一致的解决方案。

Answer 2

无论您的父div是什么或主体，都可以使用margin-right属性(尽管我不能100%确定滚动条是否也在主体下，所以如果是，它就不起作用。如果是，只需为主体内和其他所有内容外的所有内容制作一个父div。(