Баннер полной ширины, не влияющий на размер области просмотра

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

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

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

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

  • Зеленое знамя работает отлично, но его расположение по оси Y определено в CSS (что неудобно).

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

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

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

Я играл с этим в течение нескольких месяцев, поэтому любая помощь будет ОЧЕНЬ признательна! : 0)

Спасибо!

0
0
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

Ты гений. Большое спасибо! : 0)

Ben 16.09.2018 14:24

Другие вопросы по теме