2
votes

Étirement :: avant l'élément à la largeur de l'écran

J'essaie d'étirer le pseudo élément header :: before sur toute la largeur de la page dans cet exemple.

100vw donne au pseudo élément la largeur de l'écran, jusqu'ici tout va bien.

Mais la position gauche left: -100%; pousse le pseudo élément trop loin vers la gauche. Est-il possible de calculer la bonne position à gauche?

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

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

Lien Codepen: https://codepen.io/anon/pen/yZGzPO

Le résultat souhaité devrait ressembler à ceci:

html css css-position pseudo-element css-calc

0 commentaires

3 Réponses :

1
votes

Définissez la position de ce pseudo élément à partir de gauche: calc (50% + -50vw) et vous avez terminé!

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

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

2 commentaires

:: avant n'est pas la pleine largeur de l'écran

la sortie souhaitée n'a pas été mentionnée lorsque j'ai répondu. Vérifie maintenant.

3
votes

Utilisez left: calc (-50vw + 50%) pour le placer sur toute la largeur de la fenêtre .

Lorsque vous utilisez margin: 0 auto il centre l ' en-tête à l'intérieur du wrapper. Cela signifie que la largeur des espaces vides des deux côtés de l ' en-tête est de 100vw moins la largeur de l' en-tête . Ce sera 100vw - 100% à partir de l'élément pseudo , et donc la fenêtre commencera à - (100vw - 100%) / 2 .

Voir la démo ci-dessous:

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

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

1 commentaires

Très bien merci! Cela semble très bien fonctionner. Voulez-vous expliquer le fonctionnement de votre solution?

1
votes

Une idée plus simple sans se soucier du calcul est de le rendre suffisamment gros et de masquer le débordement:

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

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

3 commentaires

C'était aussi ma première pensée, mais je n'aime pas trop la valeur overflow-x: hidden , cela peut causer des problèmes inattendus plus tard. Cependant, c'est une meilleure solution si vous avez besoin d'avoir des barres de défilement verticales, car la réponse acceptée ne fonctionne pas avec un contenu à défilement.

@petsk oui et c'est l'objectif principal de SO. fournir des réponses différentes car il n’existe pas de meilleure . Ensuite, n'importe qui peut trouver la réponse qui lui convient le mieux;)

Oui c'est vrai :)