Ответ, опубликованный Я. Шохамом (с использованием абсолютного позиционирования), кажется самым простым решением в большинстве случаев, когда контейнер имеет фиксированную высоту, но если родительский DIV должен содержать несколько DIV и автоматически настраивать его высоту на основе динамического содержимого, тогда может быть проблема. Мне нужно было иметь два блока динамического контента; один выровнен по верху контейнера, а другой по дну, и хотя я мог бы настроить контейнер под размер верхнего DIV, если бы DIV, выровненный по нижнему краю, был выше, он не изменил бы размер контейнера, но вытянулся бы за пределы . Метод, описанный выше Ромием с использованием позиционирования в стиле таблицы, хотя и немного более сложен, но более надежен в этом отношении и позволяет выравнивать по дну и корректировать автоматическую высоту контейнера.
CSS
#container {
display: table;
height: auto;
}
#top {
display: table-cell;
width:50%;
height: 100%;
}
#bottom {
display: table-cell;
width:50%;
vertical-align: bottom;
height: 100%;
}
HTML
<div id=“container”>
<div id=“top”>Dynamic content aligned to top of #container</div>
<div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>
Я понимаю, что это не новый ответ, но я хотел прокомментировать этот подход, поскольку он заставил меня найти свое решение, но как новичку мне не разрешили комментировать, только публиковать.