Как я могу отправить внутренний <div> в конец его родительского <div>?

Div внутри другого div изображения и кода ниже. Потому что будет текст и изображения родительского div. И красный div будет последним элементом родительского div.

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

Это один из способов

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

Но поскольку внутренний div расположен абсолютно, вам всегда придется беспокоиться о том, чтобы другой контент во внешнем div перекрывал его (и вам всегда нужно устанавливать фиксированные высоты).

Если вы можете сделать это, лучше сделать этот внутренний div последним объектом DOM во внешнем div и установить для него значение «clear: both».

Флексбокс способ.

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

Редактировать:

Источник - Руководство Flexbox

Поддержка браузера для flexbox - Caniuse

Сделайте внешний div position="relative"и внутренний div position="absolute"и установите его bottom="0".

Вот еще один чистый трюк CSS, который не влияет на поток элементов.

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

Возможно, вам не нужно абсолютное позиционирование, потому что оно нарушает перекомпоновку: в некоторых случаях лучшим решением является создание элемента grandparent display:table;и родительского элемента display:table-cell;vertical-align:bottom;. После этого вы сможете передать дочерние элементы, display:inline-block;и они будут автоматически перетекать к нижней части родительского элемента.

Примечание: это ни в коем случае не лучший способ сделать это!

Ситуация : мне нужно было сделать то же самое, только я не смог добавить никаких дополнительных div, поэтому я застрял с тем, что у меня было, и вместо того, чтобы удалить innerHTML и создать другой с помощью javascript, почти как 2 рендера, мне нужно было иметь контент на дно (анимированная полоса).

Решение: Учитывая то, как я устал в то время, кажется нормальным даже думать о таком методе, однако я знал, что у меня есть родительский элемент DOM, с которого начинается высота бара.

Вместо того, чтобы возиться с javascript, я использовал CSS-ответ ( НЕ ВСЕГДА ХОРОШАЯ ИДЕЯ )! :)

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

Да, это правильно, вместо того, чтобы позиционировать DOM, я перевернул его родителя в css.

По моему сценарию это сработает! Возможно, и для других! Нет пламени! :)

Вот способ избежать абсолютных элементов div и таблиц, если вы знаете рост родителей:

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

пример

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