Existe-t-il un moyen de rendre la largeur d'un DIV enfant plus large que celle du DIV parent à l'aide de CSS ?

Question

Existe-t-il un moyen d'avoir un DIV enfant à l'intérieur d'un DIV parent conteneur qui est plus large que son parent. Le DIV enfant doit avoir la même largeur que la fenêtre du navigateur.

Voir l'exemple ci-dessous :

L'enfant DIV doit reste un enfant de la division parent. Je sais que je peux définir des marges négatives arbitraires sur la division enfant pour la rendre plus large, mais je n'arrive pas à trouver comment faire en sorte que la largeur du navigateur soit de 100 %.

Je sais que je peux le faire :

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

Mais j'ai besoin que l'enfant ait la même largeur que le navigateur, qui est dynamique.

Mise à jour

Merci pour vos réponses, il semble que la réponse la plus proche jusqu'à présent est de faire l'enfant DIV position: absolute et définissez les propriétés gauche et droite à 0.

Le prochain problème que j'ai est que le parent a position: relative ce qui signifie que les propriétés de gauche et de droite sont toujours relatives à la division parente et non au navigateur, voir l'exemple ici : jsfiddle.net/v2Tja/2

Je ne peux pas retirer le position: relative du parent sans foutre en l'air tout le reste.

Answer 1

Voici une solution générique qui permet de conserver l'élément enfant dans le flux de documents :

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

Nous avons fixé le width de l'élément enfant pour qu'il remplisse toute la largeur de la fenêtre d'affichage, puis nous le faisons correspondre au bord de l'écran en le déplaçant vers l'élément de type left à une distance égale à la moitié de la fenêtre d'affichage, moins 50 % de la largeur de l'élément parent.

Démonstration :

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

<div class="parent">
  Pre
  <div class="child">Child</div>
  Post
</div>

Prise en charge des navigateurs pour vw et pour calc() peut généralement être considéré comme IE9 et plus récent.

Note : Cela suppose que le modèle de boîte est réglé sur border-box . Sans border-box il faudrait également soustraire les marges et les bordures, ce qui rendrait cette solution désordonnée.

Note : Il est conseillé de masquer le débordement horizontal de votre conteneur de défilement, car certains navigateurs peuvent choisir d'afficher une barre de défilement horizontale malgré l'absence de débordement.

Answer 2

Utiliser le positionnement absolu

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Answer 3

Cela peut marcher :

<div id="t01" class="parent">
  <div class="child"></div>
</div>

.parent {background: none repeat scroll 0 0 red;
    display: block;
    height: 400px;
    left: 50%;
    margin-left: -480px;
    margin-top: -200px;
    overflow: visible;
    position: absolute;
    top: 50%;
    width: 960px;}
.child { background: none repeat scroll 0 0 #EBEBEB;
    height: 300px;
    left: 50%;
    margin-left: -700px;
    margin-top: -150px;
    position: absolute;
    top: 50%;
    width: 1400px}

Answer 4

J'ai eu un problème similaire. Le contenu de l'élément enfant était censé rester dans l'élément parent tandis que l'arrière-plan devait s'étendre sur toute la largeur de la fenêtre d'affichage.

J'ai résolu ce problème en faisant de l'élément enfant position: relative et l'ajout d'un pseudo-élément ( :before ) avec position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px; . Le pseudo-élément reste derrière l'enfant réel comme un pseudo-élément d'arrière-plan. Cela fonctionne dans tous les navigateurs (même IE8+ et Safari 6+ - je n'ai pas la possibilité de tester les versions plus anciennes).

Petit exemple de violon : http://jsfiddle.net/vccv39j9/

Answer 5

Vous pouvez essayer position : absolute. et donner largeur et hauteur , top : 'axe y à partir du haut et gauche : 'axe des x'.