将:: before元素拉伸到屏幕宽度

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>

Codepen链接：https://codepen.io/anon/pen/yZGzPO

所需的结果应如下所示：

Answer 1

使用left: calc(-50vw + 50%)将其放置在整个视口宽度上。

当您使用margin: 0 auto时，它会将header居中包装在包装器内。这意味着header两侧的空空格的宽度为100vw减去header的宽度。这将是 pseudo 元素中的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

从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>

Answer 3

一个不用费心计算的简单想法是使其足够大并隐藏溢出：

.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>