Полный баннер ширины, который не влияет на размер области просмотра

Question

Я боролся с этой простой проблемой некоторое время, и мне нужна помощь ...

Я пытаюсь создать полноцветный цветной баннер, который охватывает всю ширинустраницы, но никак не влияет на размер окна просмотра браузера.Я хочу, чтобы он был виден человеческим глазам, но я не хочу, чтобы он влиял на размер / местоположение начального вида браузера или поведение прокрутки ... точно так же, как его нет на самом деле.

Я также хочучтобы иметь возможность разместить баннер в HTML.

Вот моя тестовая страница: http://www.tanatu.com/widthtest

• Зеленый баннер работает отлично, но это-определение определено в CSS (что очень тяжело)

• Пока я думаю, что Pink Banner - это мое предположение и работает так, как задумано в Chrome, но не в Safari на iOS, гдеокно просмотра перекошено в одну сторону

Проблема с позиционированием iOS в Safari

Правильное позиционирование

I 'Я играл с этим в течение нескольких месяцев, поэтому любая помощь будет высоко ценится!: 0)

Спасибо!

Answer 1

Потому что вы пытаетесь вырваться из родительского контейнера, в котором находится ваша задача. Вы можете сделать это несколькими способами, но я думаю, что самым простым без полного изменения разметки было бы использование комбинации единиц ширины области просмотра и calc()

Если вы измените эти атрибуты на #widthtest4, это должно работать:

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