¿Cómo puedo enviar un <div> interno al final de su <div> principal?
El div dentro de otra imagen div y el código a continuación. Porque habrá texto e imágenes del div principal. Y el div rojo será el último elemento del div principal.
<div style="width: 200px; height: 150px; border: 1px solid black;">
<div style="width: 100%; height: 50px; border: 1px solid red;">
</div>
</div>Expandir fragmento
Aceptado
Esta es una manera
<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>Expandir fragmento
Pero debido a que el div interno está posicionado de manera absoluta, siempre tendrás que preocuparte de que otro contenido en el div externo se superponga (y siempre tendrás 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 "borrar: ambos".
Una forma de caja flexible.
.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;
}<div class="parent">
<div>Images, text, buttons oh my!</div>
<div>Bottom</div>
</div>Expandir fragmento
Editar:
Fuente - Guía Flexbox
Soporte de navegador para flexbox - Caniuse
Haga el div externo position="relative"y el div interno position="absolute"y configúrelo bottom="0".
