¿Cómo puedo enviar un <div> interno al fondo de su padre <div>?

El div dentro de otra imagen div y el código a continuación. Porque habrá texto e imágenes del div padre. Y el div rojo será el último elemento del div padre.

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

Esta es una forma

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

Pero debido a que el div interno está posicionado absolutamente, siempre tendrá que preocuparse por otro contenido en el div externo que se superponga (y siempre tendrá que establecer alturas fijas).

Si puede hacerlo, es mejor hacer que ese div interno sea el último objeto DOM en su div externo y configurarlo en "clear: both".

Una forma flexbox.

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

Editar:

Fuente - Guía de Flexbox

Soporte de navegador para flexbox - Caniuse

Haga el div externo position="relative"y el div interno position="absolute"y configúrelo bottom="0".

Aquí hay otro truco de CSS puro, que no afecta el flujo de elementos.

#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>

Es posible que no desee un posicionamiento absoluto porque rompe el reflujo: en algunas circunstancias, una mejor solución es hacer que el elemento abuelo display:table;y el elemento padre display:table-cell;vertical-align:bottom;. Después de hacer esto, deberías poder darle elementos secundarios display:inline-block;y estos fluirán automáticamente hacia la parte inferior del elemento primario.

Nota: ¡Esta no es la mejor manera de hacerlo!

Situación : tuve que hacer lo mismo, solo que no pude agregar ningún div extra, por lo tanto, me quedé con lo que tenía y en lugar de eliminar innerHTML y crear otro a través de javascript casi como 2 renders, necesitaba tener el contenido en el abajo (barra animada).

Solución: Dado lo cansado que estaba en ese momento, parece normal incluso pensar en un método de este tipo, sin embargo, sabía que tenía un elemento DOM principal desde el que comenzaba la altura de la barra.

En lugar de jugar con el javascript, ¡utilicé una respuesta CSS ( NO SIEMPRE BUENA IDEA )! :)

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

Sí, eso es correcto, en lugar de colocar el DOM, volví a su padre al revés en css.

¡Para mi escenario funcionará! ¡Posiblemente para otros también! No Flame! :)

Aquí hay una manera de evitar divisiones y tablas absolutas si conoce la altura de los padres:

<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:

Ejemplo

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