Jak mogę wysłać wewnętrzny <div> do dolnej części jego rodzica <div>?

Div wewnątrz innego obrazu div i kodu poniżej. Ponieważ będzie tekst i obrazy rodzica div. A czerwony div będzie ostatnim elementem div rodzica.

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

To jest jeden sposób

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

Ale ponieważ wewnętrzny div jest ustawiony absolutnie, zawsze będziesz musiał martwić się o to, że inna zawartość w zewnętrznej div nachodzi na niego (i zawsze będziesz musiał ustawić stałe wysokości).

Jeśli możesz to zrobić, lepiej uczynić ten div div ostatnim obiektem DOM w twoim div div i ustawić go na „wyczyść: oba”.

Sposób na 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;
}

Edytować:

Źródło - Przewodnik Flexbox

Obsługa przeglądarki Flexbox - Caniuse

Zrób zewnętrzny div position="relative"i wewnętrzny div position="absolute"i ustaw go bottom="0".

Oto kolejna sztuczka CSS, która nie wpływa na przepływ elementów.

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

Być może nie chcesz pozycjonowania bezwzględnego, ponieważ przerywa ono przepływ: w niektórych okolicznościach lepszym rozwiązaniem jest utworzenie elementu dziadka display:table;i elementu nadrzędnego display:table-cell;vertical-align:bottom;. Po wykonaniu tej czynności powinieneś być w stanie podać elementy potomne, display:inline-block;a one automatycznie przepłyną w kierunku dna elementu nadrzędnego.

Uwaga: To nie jest najlepszy sposób, aby to zrobić!

Sytuacja : Musiałem zrobić to samo, tylko że nie byłem w stanie dodać żadnych dodatkowych div, dlatego utknąłem z tym, co miałem i zamiast usuwać innerHTML i tworzyć kolejne za pomocą javascript prawie jak 2 rendery, potrzebowałem mieć zawartość dół (animowany pasek).

Rozwiązanie: Biorąc pod uwagę to, jak byłem zmęczony, nawet myślenie o takiej metodzie wydaje się normalne, ale wiedziałem, że mam macierzysty element DOM, od którego zaczyna się wysokość paska.

Zamiast zadzierać z javascript, użyłem odpowiedzi CSS ( NIE ZAWSZE DOBRY POMYSŁ )! :)

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

Tak, to prawda, zamiast pozycjonowania DOM, odwróciłem jego rodzica do góry nogami w css.

W moim scenariuszu będzie działać! Być może także dla innych! Bez ognia! :)

Oto sposób uniknięcia absolutnych div i tabel, jeśli znasz wzrost rodzica:

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

Przykład

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