CSS：当存在垂直溢出时，绝对位置与 chrome 中固定的位置具有冲突的屏幕宽度答案

【问题标题】：CSS: position absolute has conflicting screen width with position fixed in chrome when there's a vertical overflowCSS：当存在垂直溢出时，绝对位置与 chrome 中固定的位置具有冲突的屏幕宽度
【发布时间】：2023-03-26 04:31:02
【问题描述】：

我目前正在编写一个网站，其视频横幅设置为在背景中固定定位，而 div 的绝对定位略微覆盖了下半部分的视频。然而问题是，一旦我添加了具有绝对定位的第二个 div，在此 div 中包含的屏幕上存在垂直溢出的情况下，屏幕的宽度会变得更大，这反过来又会扰乱视频大小。

这是我的代码：

   <div class="row" style="height: 5%;">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; box-shadow: 0px 10px 5px #000000; z-index:5; padding:0;">
            Search
        </div>
    </div>
</div>

<div class="container-fluid video" style="height:70%; z-index:5; padding:0; margin:0;">
    <div class="row" style="padding:0; margin:0; height: 100%;">
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" id="video-container" style="background-color:white; height:100%; padding:0; margin:0;">
            <video autoplay="" loop="" style="position: fixed; right:0px; bottom: 0; min-width: 100%; min-height: 100%; transform: translateX(calc((100% - 100vw) / 2));">
                <source src="beats/titlescreen.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>

<div class="container-fluid header" style="background-color: red; position:absolute; height:100%;">
This is a test
</div>

由于我在上面代码中看到的最后一个 div 中设置了 100% 的高度，因此页面上有一个垂直溢出，这使得宽度比没有溢出时稍大（如果你去掉 'height: 100%;' 标记这将变得明显）。

我不确定为什么会发生这种情况，以及为什么它只包含在 Chrome 中。有什么想法吗？

【问题讨论】：

标签： javascript html css google-chrome css-position

【解决方案1】：

是否可以给body一个overflow: hidden;

<body style="overflow: hidden;">
<div class="row" style="height: 5%;">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; box-shadow: 0px 10px 5px #000000; z-index:5; padding:0;">
            Search
        </div>
    </div>

<div class="container-fluid video" style="height:70%; z-index:5; padding:0; margin:0;">
    <div class="row" style="padding:0; margin:0; height: 100%;">
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" id="video-container" style="background-color:white; height:100%; padding:0; margin:0;">
            <video autoplay="" loop="" style="position: fixed; right:0px; bottom: 0; min-width: 100%; min-height: 100%; transform: translateX(calc((100% - 100vw) / 2));">
                <source src="beats/titlescreen.mp4" type="video/mp4">
            </video>
        </div>
    </div>
</div>

<div class="container-fluid header" style="background-color: red; position:absolute; height:100%;">
This is a test
</div>
</body>

【讨论】：

当我添加 overflow:hidden 时，问题得到了一定程度的解决，但是我无法向下滚动查看最终 div 中的内容。如果我做overflow-x:hidden，那么问题根本没有解决（与overflow-y:hidden相同）。

【解决方案2】：

所以在玩了很多之后，我得出结论，不知何故，问题是由于 padding:0;连同左：0；和权利：0；在第一个 div 上。我不确定这是如何导致问题的，也许与引导程序有关？无论如何，感谢您的帮助！

【讨论】：