Come posso inviare un <div> interno alla fine del <div> principale?

Il div all'interno di un'altra immagine div e codice di seguito. Perché ci saranno testo e immagini del div genitore. E il div rosso sarà l'ultimo elemento del div parent.

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

Questo è un modo

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

Ma poiché il div interno è posizionato in modo assoluto, dovrai sempre preoccuparti di altri contenuti nel div esterno che si sovrappongono (e dovrai sempre impostare altezze fisse).

Se riesci a farlo, è meglio rendere quel div interno l'ultimo oggetto DOM nel div esterno e impostarlo su "clear: both".

Un modo flessibile.

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

Modificare:

Fonte - Guida Flexbox

Supporto browser per flexbox - Caniuse

Crea il div esterno position="relative"e il div interno position="absolute"e impostalo bottom="0".

Ecco un altro trucco CSS puro, che non influenza un flusso di elementi.

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

Potresti non voler un posizionamento assoluto perché interrompe il riflusso: in alcune circostanze, una soluzione migliore è quella di rendere l'elemento nonno display:table;e l'elemento genitore display:table-cell;vertical-align:bottom;. Dopo averlo fatto, dovresti essere in grado di fornire gli elementi figlio display:inline-block;e questi fluiranno automaticamente verso il fondo del genitore.

Nota: questo non è affatto il modo migliore per farlo!

Situazione : dovevo fare la stessa cosa solo che non ero in grado di aggiungere altri div extra, quindi ero bloccato con quello che avevo e piuttosto che rimuovere innerHTML e crearne un altro tramite javascript quasi come 2 rendering avevo bisogno di avere il contenuto al in basso (barra animata).

Soluzione: dato quanto ero stanco al momento sembra normale pensare a un metodo del genere, tuttavia sapevo di avere un elemento DOM padre da cui iniziava l'altezza della barra.

Invece di fare confusione con il javascript, ho usato una risposta CSS ( NON SEMPRE BUONA IDEA )! :)

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

Sì, è corretto, invece di posizionare il DOM, ho capovolto il suo genitore in CSS.

Per il mio scenario funzionerà! Forse anche per gli altri! No Flame! :)

Ecco un modo per evitare div e tabelle assolute se conosci l'altezza dei genitori:

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

Esempio

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