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

Question

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>

Answer 1

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

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

Answer 2

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

Answer 3

Путь 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;
}

Edit:

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

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

Answer 4

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

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

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

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

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

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

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

Answer 5

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

Answer 6

Вот еще один чистый трюк 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>

Answer 7

Вот способ избежать абсолютных элементов 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:

Пример

Answer 8

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