Gibt es eine Möglichkeit, die Breite eines untergeordneten DIV mithilfe von CSS breiter als die des übergeordneten DIV zu machen?

Gibt es eine Möglichkeit, eine untergeordnete DIV in einem übergeordneten Container-DIV zu haben, der breiter als die übergeordnete ist? Das untergeordnete DIV muss dieselbe Breite wie das Browser-Ansichtsfenster haben.

Siehe Beispiel unten:

Das Kind DIV muss als Kind des Eltern-Div bleiben. Ich weiß, dass ich willkürliche negative Ränder für das untergeordnete Div festlegen kann, um es breiter zu machen, aber ich kann nicht herausfinden, wie es im Wesentlichen 100% des Browsers breit wird.

Ich weiß, ich kann dies tun:

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

Aber ich brauche das Kind so breit wie der Browser, der dynamisch ist.

Aktualisieren

Vielen Dank für Ihre Antworten. Bisher scheint die naheliegendste Antwort darin zu bestehen, die untergeordnete DIV-Position absolut zu machen und die Eigenschaften left und right auf 0 zu setzen.

Das nächste Problem, das ich habe, ist, dass das übergeordnete Element die Position: relativ hat, was bedeutet, dass die linken und rechten Eigenschaften immer noch relativ zum übergeordneten div und nicht zum Browser sind. Siehe Beispiel hier: jsfiddle.net/v2Tja/2

Ich kann die Position relativ zum Elternteil nicht entfernen, ohne alles andere zu vermasseln.

Verwenden Sie die absolute Positionierung

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

Hier ist eine generische Lösung, die das untergeordnete Element im Dokumentfluss behält:

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

Wir stellen das widthuntergeordnete Element so ein, dass es die gesamte Breite des Ansichtsfensters ausfüllt, und stellen dann sicher, dass es den Rand des Bildschirms erreicht, indem wir es um lefteinen Abstand von der Hälfte des Ansichtsfensters auf minus 50% der Breite des übergeordneten Elements verschieben.

Demo:

* {
  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>

Die Browserunterstützung für vw und calc () kann im Allgemeinen als IE9 und neuer angesehen werden.

Hinweis: Dies setzt voraus, dass das Box-Modell auf eingestellt ist border-box. Ohne border-boxmüssten Sie auch Auffüllungen und Ränder abziehen, was diese Lösung zu einem Chaos macht.

Hinweis: Es wird empfohlen, den horizontalen Überlauf Ihres Bildlaufcontainers auszublenden, da bestimmte Browser möglicherweise eine horizontale Bildlaufleiste anzeigen, obwohl kein Überlauf vorliegt.

Ich habe lange nach einer Lösung für dieses Problem gesucht. Idealerweise möchten wir, dass das Kind größer ist als das Elternteil, ohne jedoch die Einschränkungen des Elternteils im Voraus zu kennen.

Und hier habe ich endlich eine brillante generische Antwort gefunden . Wörtlich kopieren:

Die Idee hier ist: Schieben Sie den Container genau nach links in die Mitte des Browserfensters: 50%; und ziehen Sie ihn dann mit einem negativen Rand von -50 vw zurück zum linken Rand.

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

Basierend auf Ihrem ursprünglichen Vorschlag (Festlegen negativer Ränder) habe ich versucht, eine ähnliche Methode zu entwickeln, bei der Prozenteinheiten für die dynamische Browserbreite verwendet werden:

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

Durch die negativen Ränder fließt der Inhalt aus dem übergeordneten DIV. Deshalb habe ich das so eingestellt padding: 0 100%;, dass der Inhalt wieder an die ursprünglichen Grenzen des Chlid DIV verschoben wird.

Durch die negativen Ränder wird auch die Gesamtbreite des .child-div aus dem Ansichtsfenster des Browsers erweitert, was zu einem horizontalen Bildlauf führt. Daher müssen wir die Extrudierbreite abschneiden, indem wir ein overflow-x: hiddenauf ein Großeltern-DIV anwenden (das das Elternteil des Eltern-Div ist):

Hier ist die JSfiddle

Ich habe es mit Nils Kaspersson versucht left: calc(-50vw + 50%) . In Chrome & FF funktionierte es einwandfrei (ich bin mir über den IE noch nicht sicher), bis ich herausfand, dass Safari-Browser es nicht richtig machen. Ich hoffe, sie haben das behoben, sobald mir diese einfache Methode wirklich gefällt.

Dies kann auch Ihr Problem beheben, bei dem sich das übergeordnete DIV-Element befinden muss position:relative

Die 2 Nachteile dieser Problemumgehungsmethode sind:

• Benötigen Sie zusätzliches Markup (dh ein Großelternelement (genau wie die gute alte vertikale Ausrichtungsmethode für Tabellen, nicht wahr ...)
• Der linke und rechte Rand des untergeordneten DIV werden niemals angezeigt, nur weil sie sich außerhalb des Ansichtsfensters des Browsers befinden.

Bitte lassen Sie mich wissen, wenn Sie Probleme mit dieser Methode haben;). Ich hoffe es hilft.

Mit Flexbox kann ein Kind mit drei CSS-Zeilen breiter als das übergeordnete Element gemacht werden.

Nur ist das Kind display, margin-leftund widthmüssen eingestellt werden. margin-lefthängt vom Kind ab width. Die Formel lautet:

margin-left: calc(-.5 * var(--child-width) + 50%);

CSS-Variablen können verwendet werden, um eine manuelle Berechnung des linken Randes zu vermeiden.

Demo Nr. 1: Manuelle Berechnung

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Demo Nr. 2: Verwenden von CSS-Variablen

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

Ich habe das benutzt:

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

Sie können versuchen, Position: absolut. und geben Sie Breite und Höhe oben an: 'y-Achse von oben' und links: 'x-Achse'

Ich hatte ein ähnliches Problem. Der Inhalt des untergeordneten Elements sollte im übergeordneten Element bleiben, während der Hintergrund die gesamte Breite des Ansichtsfensters erweitern musste.

Ich habe dieses Problem behoben, indem ich das untergeordnete Element erstellt position: relativeund ein Pseudoelement ( :before) hinzugefügt habe position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. Das Pseudoelement bleibt als Pseudohintergrundelement hinter dem eigentlichen Kind zurück. Dies funktioniert in allen Browsern (auch in IE8 + und Safari 6+ - ältere Versionen können nicht getestet werden).

Kleine Beispielgeige: http://jsfiddle.net/vccv39j9/

Neben der Lösung von Nils Kaspersson entscheide ich mich auch für die Breite der vertikalen Bildlaufleiste. Ich verwende 16pxals Beispiel, das von der Breite des Ansichtsfensters abgezogen wird. Dadurch wird verhindert, dass die horizontale Bildlaufleiste angezeigt wird.

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

Angenommen, das übergeordnete Element hat eine feste Breite, z. B. #page { width: 1000px; }und ist zentriert #page { margin: auto; }, möchten Sie, dass das untergeordnete Element der Breite des Browser-Ansichtsfensters entspricht, die Sie einfach ausführen können:

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

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

Versuchen Sie Folgendes, um Child Div so breit wie den Inhalt zu machen:

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

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

Ich weiß, dass dies alt ist, aber für jeden, der zu einer Antwort kommt, würden Sie es so machen:

Überlauf für ein Element, das das übergeordnete Element enthält, z. B. den Körper.

Geben Sie Ihrem untergeordneten Element eine Breite, die viel breiter als Ihre Seite ist, und positionieren Sie es absolut links um -100%.

Hier ist ein Beispiel:

body {
  overflow:hidden;
}

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

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

Hier ist auch eine JS-Geige: http://jsfiddle.net/v2Tja/288/

Dann ist die Lösung die folgende.

HTML

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

CSS

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

Ich habe einige Ihrer Lösungen ausprobiert. Dieses :

margin: 0px -100%;
padding: 0 100%;

ist bei weitem das Beste, da wir für kleinere Bildschirme kein zusätzliches CSS benötigen. Ich habe einen CodePen erstellt, um die Ergebnisse anzuzeigen: Ich habe ein übergeordnetes Div mit einem Hintergrundbild und ein untergeordnetes Divon-Div mit innerem Inhalt verwendet.

https://codepen.io/yuyazz/pen/BaoqBBq