不影响视口大小的全宽横幅

Question

我一直在与这个简单的问题作斗争，我正在寻求帮助...

我正在尝试制作一个横跨整个页面宽度的全宽彩色横幅，但不会以任何方式影响浏览器视口的大小。我希望它对人眼可见，但我不希望它影响浏览器开始视图或滚动行为的大小/位置......就像它实际上并不存在一样。

我还希望能够将横幅内嵌在 HTML 中。

这是我的测试页面：http://www.tanatu.com/widthtest

• 绿色横幅效果很好，但它的 y 位置是在 CSS 中定义的（这很痛苦）

• 到目前为止，粉色横幅是我的最佳猜测，它在 Chrome 上按预期工作，但在视口偏向一侧的 iOS 上的 Safari 上却不行

Safari iOS Positioning Issue

Correct Positioning

我已经玩了几个月了，所以任何帮助都会非常感谢！ :0)

谢谢！

Answer 1

因为您正试图突破您面临挑战的父容器。您可以通过几种方式做到这一点，但我认为在不完全更改标记的情况下最简单的方法是使用视口宽度单位和 calc()

的组合

如果您在 #widthtest4 上更改这些属性，它应该可以工作：

#widthtest4 {
  width: 100vw;
  margin-left: calc(-50vw + 426px);
}