HTML: Якорный элемент блока в нижней части родительского блока?

Question

Существует ли кросс-браузерный метод прикрепления некоторого контента в <div> к нижней части? Одна из трудностей заключается в том, что <div> может иметь произвольную высоту, но я хочу, чтобы определенный контент всегда прилипал к нижней части.

Это было бы достигнуто в такие плохие старые времена, как это:

<table style="height: foo;">
    <tr><td valign="top">content</td></tr>
    <tr><td valign="bottom">stuck to the bottom</td></tr>
</table>

Могу ли я сделать это, не прибегая к этой технике?

Answer 1

Конечно, это довольно просто. Просто установите родителя div с помощью position:relative. Затем, внутренний элемент, который вы хотите прикрепить к нижней части, просто используйте position:absolute, чтобы прикрепить его к нижней части элемента.

<div id="parent">
    <div id="child">
    </div>
</div>

.

#parent {
  position:relative;
}
#child {
  position:absolute;
  bottom:0;
}