Question

我有一个 1:1 水印风格的背景图形，它是固定的，所以它不会随着页面滚动，但主容器需要滚动，所以我把它作为一个固定的 ::before 伪元素到所说的 div （预先构建的购物车安装）。主容器宽度为 90%，最大宽度为 1400px，用于在其两侧显示主体背景。固定图形根据屏幕高度进行不同大小的媒体查询，因为一旦页面滚动（在顶部被裁剪），它就不能比父图形高。我不在乎右侧是否被屏幕边缘切断，因此宽度可以大于容器（否则使用将毫无意义；它是 L 形图形）。伪元素是 width calc(90% - 16px) 以说明滚动条宽度（我不知道为什么父元素不受它的影响；它在 Inspect 显示的 page-wrapper 和 page-wrapper-inner 内作为全宽，虽然 CSS 没有列出它的宽度），否则在移动设备上，它会比主容器大，当你向下滚动页面时，你会注意到顶部的大小差异。

问题在于，在真实的移动屏幕上（不是显示侧面背景的模拟器，与我尝试过的真实手机不同），右侧在主容器之前的 90% - 16px 附近被截断结束。我会在移动查询中使其宽度达到 100%（仍然显示一小段身体背景），但我不知道是否所有的移动设备都不会显示侧面的 html/body 背景？）。（是的，即使我取消了移动版本的自定义滚动条，移动设备也会受到滚动条宽度的影响。）背景附件固定不起作用，因为背景位置需要是主容器的 25px calc(100vh - 1000px) ，它会根据浏览器宽度更改大小/位置。

我已经尝试了十亿次，我能想到的一切，包括背景剪辑、背景附件固定、自动边距，还有十亿次我记不清了，因为这个问题已经困扰了我几个月，但尤其是现在我更新了图形（大小没有变化）。

如何使固定伪元素与主容器的大小相同？

请注意，#main_container CSS 不是我做的；我不知道为什么它和其他 div 上的过滤器！忽略了我为淡入添加的后来不相关的 CSS，因此具有透明背景的灰色图形不会在新页面加载时闪烁，也不会伤害眼睛/触发偏头痛或癫痫发作 [我有偏头痛由光触发，闪光灯是痛苦，尽管向伪添加白色背景也有帮助]。 HTML/body CSS 之所以如此是因为不同页面上的不相关元素，必须保持这种方式。忽略图形的媒体查询；最大为 800x800 像素，最小为 100x100 像素。

html, body {
width:100vw;
overflow-x:hidden;
overflow-y:scroll;
height:auto;
min-height:100vh;
margin-left:0;
margin-right:0;
-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
background-attachment:fixed;
}

#page-wrapper { 
min-height: 100%; 
z-index: 2; 
position: relative; 
} 

#page-wrapper-inner {
}

#main_container { 
width: 90%;
max-width: 1400px; 
margin: auto; 
margin-top: 4px; 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffFFFFFF,endColorstr=#ffFFFFFF);
}

#main_container::before {
background:#FFFFFF;
background-image: url(/flourish.png);
background-repeat: no-repeat;
content: "";
position:fixed;
background-position:25px calc(100vh - 1000px);
height: 100%;
width:calc(90vw - 16px);
max-width:1400px;
}

剥离到相关基础：

<html>
<body>
[header/menu section]
<#page-wrapper>
<#page-wrapper-inner>
<#main-container>
<#main-container::before>
[other divs for content]
[footer]
</all noted divs>

使固定的伪 div 与父级宽度相同

0 个答案: