Як я можу надіслати внутрішній <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, що перекриває його (і вам завжди доведеться встановлювати фіксовану висоту).

Якщо ви можете це зробити, краще зробити цей внутрішній поділ останнім об’єктом DOM у вашому зовнішньому div і встановити його на "ясно: обидва".

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

Редагувати:

Джерело - Посібник з Flexbox

Підтримка браузера для Flexbox - Caniuse

Зробіть зовнішній дів position="relative"та внутрішній дів 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>

Можливо, ви не хочете абсолютного позиціонування, оскільки воно порушує поповнення: в деяких умовах краще рішення - зробити елемент бабусі display:table;та бабусі та батьківський елемент display:table-cell;vertical-align:bottom;. Зробивши це, ви повинні мати можливість дати дитині елементи, display:inline-block;і вони автоматично перетікають до нижньої частини батьків.

Примітка. Це далеко не найкращий спосіб зробити це!

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

Рішення: З огляду на те, наскільки я втомився в той час, здається, нормально навіть думати про такий метод, проте я знав, що у мене є батьківський елемент DOM, з якого починається висота планки.

Замість того, щоб більше возитися з javascript, я використав відповідь CSS ( НЕ ВСЕ ДОБРО ІДЕЯ )! :)

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

Так, це правильно, замість того, щоб розташувати DOM, я повернув його батьків догори дном в css.

За моїм сценарієм це буде працювати! Можливо і для інших! Без полум'я! :)

Ось спосіб уникнути абсолютних знаків та таблиць, якщо ви знаєте зріст батьків:

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