html - 不影响视口(viewport)大小的全宽横幅

Question

我已经为这个简单的问题苦苦挣扎了一段时间，我正在寻求一些帮助...

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

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

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

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

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

Safari iOS Positioning Issue

Correct Positioning

我已经玩了好几个月了，所以任何帮助都将不胜感激! :0)

谢谢!

Answer 1

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

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

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