Wie kann ich ein inneres <div> an den unteren Rand seines übergeordneten <div> senden?

Das div in einem anderen div Bild und Code unten. Weil es Text und Bilder des übergeordneten Div gibt. Und rotes div wird das letzte Element des übergeordneten div sein.

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

Dies ist eine Möglichkeit

<div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;">

    <div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;">
    </div>
</div>

Da das innere Div jedoch absolut positioniert ist, müssen Sie sich immer um andere Inhalte im äußeren Div kümmern, die es überlappen (und Sie müssen immer feste Höhen festlegen).

Wenn Sie dies tun können, ist es besser, dieses innere Div zum letzten DOM-Objekt in Ihrem äußeren Div zu machen und es auf "clear: both" zu setzen.

Ein Flexbox-Weg.

HTML:

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

CSS:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}

Bearbeiten:

Quelle - Flexbox-Handbuch

Browserunterstützung für Flexbox - Caniuse

Machen Sie das äußere position="relative"und das innere Div position="absolute"und stellen Sie es ein bottom="0".

Hier ist ein weiterer reiner CSS-Trick, der einen Elementfluss nicht beeinflusst.

#parent {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}

<div id="parent">
  <h1>Positioning with margin</h1>
  <div class="child">
    Content to the bottom
  </div>
</div>

Möglicherweise möchten Sie keine absolute Positionierung, da dies den Reflow unterbricht. Unter bestimmten Umständen besteht eine bessere Lösung darin, das Großelternelement display:table;und das übergeordnete Element zu erstellen display:table-cell;vertical-align:bottom;. Danach sollten Sie in der Lage sein, den display:inline-block;untergeordneten Elementen zu geben, und sie fließen automatisch zum unteren Rand des übergeordneten Elements.

Hinweis: Dies ist keineswegs der bestmögliche Weg, dies zu tun!

Situation : Ich musste das gleiche tun, nur konnte ich keine zusätzlichen Divs hinzufügen, daher blieb ich bei dem, was ich hatte, und anstatt innerHTML zu entfernen und ein anderes über Javascript zu erstellen, fast wie 2 Renderings, die ich brauchte, um den Inhalt im zu haben unten (animierte Leiste).

Lösung: Angesichts der Müdigkeit, die ich zu der Zeit hatte, scheint es normal, überhaupt an eine solche Methode zu denken, aber ich wusste, dass ich ein übergeordnetes DOM-Element hatte, von dem aus die Höhe der Leiste begann.

Anstatt weiter mit dem Javascript herumzuspielen, habe ich eine ( NICHT IMMER GUTE IDEE ) CSS-Antwort verwendet! :) :)

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

Ja, das ist richtig. Anstatt das DOM zu positionieren, habe ich das übergeordnete Element in CSS auf den Kopf gestellt.

Für mein Szenario wird es funktionieren! Möglicherweise auch für andere! Keine Flamme! :) :)

So vermeiden Sie absolute Divs und Tabellen, wenn Sie die Größe der Eltern kennen:

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS:

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle:

Beispiel

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>