Растяжение :: перед элементом на ширину экрана

Question

Я пытаюсь растянуть псевдоэлемент header::before до полной ширины страницы в этом примере.

100vw дает псевдоэлементу ширину экрана, пока что все хорошо.

Но левая позиция left: -100%; слишком сильно толкает псевдоэлемент влево.Можно ли рассчитать правильную левую позицию?

.wrapper {
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
}

header {
  background: pink;
  position: relative;
  z-index: 0;
}

header::before {
  background: lightblue;
  position: absolute;
  z-index: -1;
  content: "";
  height: 100%;
  width: 100vw;
  /* full page width */
  left: -100%;
  /* left positioning */
}

main {
  background: wheat;
}

<div class="wrapper">
  <header>Header</header>
  <main>Main content</main>
</div>

Кодовая ссылка: https://codepen.io/anon/pen/yZGzPO

Желаемый результат должен выглядеть следующим образом:

Answer 1

Используйте left: calc(-50vw + 50%), чтобы разместить его по всей области просмотра ширина.

При использовании margin: 0 auto он центрируется header внутри оболочки.Это означает, что ширина пустых пространств с обеих сторон header равна 100vw минус ширина header.Это будет 100vw - 100% от элемента псевдо , и, следовательно, область просмотра начнется с -(100vw - 100%) / 2.

См. Демонстрацию ниже:

.wrapper {
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
}

header {
  background: pink;
  position: relative;
  z-index: 0;
}

header::before {
  background: lightblue;
  position: absolute;
  z-index: -1;
  content: "";
  height: 100%;
  width: 100vw; /* full page width */
  left: calc(-50vw + 50%); /* left positioning */
}

main {
  background: wheat;
}

<div class="wrapper">
  <header>Header</header>
  <main>Main content</main>
</div>

Answer 2

Более простая идея без использования вычислений - сделать его достаточно большим и скрыть переполнение:

.wrapper {
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
}

header {
  background: pink;
  position: relative;
  z-index: 0;
}

header::before {
  content: "";
  background: lightblue;
  position: absolute;
  z-index: -1;
  top:0;
  bottom:0;
  left: -100vw;
  right:-100vw;
}

main {
  background: wheat;
}

body {
 overflow-x:hidden;
}

<div class="wrapper">
  <header>Header</header>
  <main>Main content</main>
</div>

Answer 3

Сделайте эту позицию псевдоэлемента из left:calc(50% + -50vw), и все готово!

.wrapper {
	width: 70%;
	max-width: 800px;
	margin: 0 auto;
}

header {
	background: pink;
	position: relative;
	z-index: 0;
}

header::before {
	position: absolute;
	background: lightblue;
	content: "";
	z-index: -1;
	width: 100vw;
	height: 100%;
	left: calc(50% + -50vw);
}

main {
	background: wheat;
}

<div class="wrapper">
	<header>Header</header>
	<main>Main content</main>
</div>