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

Question

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

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

我还希望能够将横幅内联放置在 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);
}