Existe-t-il un moyen de rendre la largeur d'un DIV enfant plus large que la DIV parent en utilisant CSS?

Une solution plus moderne à cette question consiste à utiliser l'Unité de fenêtre vw et calc().

Définissez le {[4] } de l'élément enfant sur 100% de la largeur de la fenêtre, ou 100vw. Déplacez ensuite l'élément enfant 50% de la largeur de la fenêtre-moins 50% de la largeur de l'élément parent – vers la gauche pour le rendre conforme au bord de l'écran.

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 50px;
    background: blue;
}

<div class='parent'>
    parent element
    <div class='child-element'>child-element</div>
</div>

Voici une démo.

Prise en charge du Navigateur pour vw et de calc() peut généralement être considéré comme IE9+.

Remarque: Ce qui suppose le modèle de boîte est fixé à border-box. Sans border-box, vous devrez également soustraire les rembourrages et les bordures, rendant cette solution un gâchis.

Sur la base de votre suggestion originale suggestion (réglage des marges négatives), j'ai essayé et trouver une méthode similaire en utilisant des unités de pourcentage pour la largeur du navigateur dynamique:

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS:

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

Les marges négatives laisseront le contenu sortir du DIV Parent. Par conséquent, je mets le padding: 0 100%; pour repousser le contenu aux limites d'origine de la DIV Chlid.

Les marges négatives feront également la.largeur totale de child-div se développe hors de la fenêtre d'affichage du navigateur, ce qui entraîne un défilement horizontal. Par conséquent, nous devons couper la largeur d'extrusion en appliquant un overflow-x: hidden à un DIV grand-parent (qui est le parent du div Parent):

Ici est le JSfiddle

J'ai essayé left: calc(-50vw + 50%) de Nils Kaspersson; cela a parfaitement fonctionné dans Chrome & FF (pas encore sûr D'IE) jusqu'à ce que je découvre que les navigateurs Safari ne le font pas correctement. J'espère qu'ils ont corrigé cela dès que j'aime vraiment ce simple méthode.

Cela peut également résoudre votre problème où l'élément DIV Parent doit être position:relative

Les 2 inconvénients de cette méthode de contournement sont:

• nécessite un balisage supplémentaire (c'est-à-dire un élément grand-parent (tout comme la bonne méthode d'alignement vertical de la table n'est-ce pas...)
• les bords gauche et droit de la DIV enfant ne s'afficheront jamais, simplement parce qu'ils sont en dehors de la fenêtre d'affichage du navigateur.

Faites-moi savoir s'il y a un problème que vous trouvez avec ceci méthode ;). Espérons que cela aide.

J'ai cherché loin et loin une solution à ce problème pendant longtemps. Idéalement, nous voulons avoir l'enfant plus grand que le parent, mais sans connaître les contraintes du parent à l'avance.

Et j'ai finalement trouvé une réponse générique brillante ici . Copier textuellement:

L'idée ici est: pousser le conteneur au milieu exact du fenêtre du navigateur avec gauche: 50%;, puis tirez-le vers le bord gauche avec négatif-50vw marge.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

J'ai utilisé ceci:

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

Vous pouvez essayer position: absolute. et donner la largeur et la hauteur, en haut: 'axe y du haut' et à gauche: 'X-axis'

, 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 étendre la largeur de la fenêtre complète.

J'ai résolu ce problème en créant l'élément enfant position: relative et en y ajoutant 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 en tant qu'élément de pseudo-arrière-plan. Cela fonctionne dans tous les navigateurs (même IE8 + et Safari 6+ - n'ont pas la possibilité de tester les anciennes versions).

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

En ajoutant à la solution de Nils Kaspersson, Je résous également la largeur de la barre de défilement verticale. J'utilise 16px comme exemple, qui est soustrait de la largeur du port de vue. Cela évitera que la barre de défilement horizontale n'apparaisse.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

Je sais que c'est vieux, mais pour ceux qui viennent à cette réponse, vous le feriez comme ceci:

Débordement caché sur un élément contenant l'élément parent, comme le corps.

Donnez à votre élément enfant une largeur beaucoup plus large que votre page, et positionnez-le à gauche absolu de -100%.

Voici un exemple:

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

Heres également un violon JS: http://jsfiddle.net/v2Tja/288/

En supposant que le parent a une largeur fixe, par exemple #page { width: 1000px; } et est centré #page { margin: auto; }, vous voulez que l'enfant corresponde à la largeur de la fenêtre du navigateur que vous pouvez simplement faire:

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

Alors la solution sera la suivante.

HTML

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

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }