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

【问题标题】：Stretching ::before element to width of screen将 ::before 元素拉伸到屏幕宽度
【发布时间】：2019-07-11 11:54:48
【问题描述】：

在此示例中，我正在尝试将 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

所需的结果应如下所示：

【问题讨论】：

标签： html css css-position pseudo-element css-calc

【解决方案1】：

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

【讨论】：

::before 不是全屏
我回答时未提及所需的输出。立即检查。

【解决方案2】：

使用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>

【讨论】：

非常好，谢谢！它似乎工作得很好。您愿意解释一下您的解决方案是如何工作的吗？

【解决方案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>

【讨论】：

这也是我首先想到的，但我不太喜欢overflow-x: hidden 的值，它可能会在未来引发意想不到的问题。但是，如果您需要垂直滚动条，这是一个更好的解决方案，因为接受的答案不适用于可滚动内容。
@petsk 是的，这是 SO 的主要目的。提供不同的答案，因为没有更好的答案。然后任何人都可以选择最适合他的答案;)
是的，这是真的:)