A resposta postada por Y. Shoham (usando posicionamento absoluto) parece ser a solução mais simples na maioria dos casos onde o contêiner tem uma altura fixa, mas se o DIV pai tiver que conter vários DIVs e ajustar automaticamente sua altura com base no conteúdo dinâmico, então pode haver um problema. Eu precisava ter dois blocos de conteúdo dinâmico; um alinhado ao topo do contêiner e um ao fundo e embora eu pudesse fazer o contêiner se ajustar ao tamanho do DIV superior, se o DIV alinhado ao fundo fosse mais alto, ele não redimensionaria o contêiner, mas se estenderia para fora . O método descrito acima por romiem usando o posicionamento de estilo de mesa, embora um pouco mais complicado, é mais robusto a esse respeito e permitiu o alinhamento com o fundo e a altura automática correta do contêiner.
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>
Sei que não é uma resposta nova, mas queria comentar sobre essa abordagem, pois me levou a encontrar minha solução, mas como um novato não tive permissão para comentar, apenas postar.