100% de altura em várias colunas (o conteúdo segue a linha de base)

Oi,

Como me deparei com muitas respostas para o problema de ajustar a altura de 2 ou mais colunas para 100% e posicionar o conteúdo das colunas na parte inferior sem vertical-align(botão enviar que segue as entradas do formulário), decidi escrever uma solução completa que envolve esses dois juntos e com o mínimo de código possível com base em table, table-celle sem floatpropriedades.

Devo mencionar que é fluido, então não se preocupe, e funciona no IE8 + ( table-cellnão é compatível com versões anteriores do IE).

Se precisar de mais de 2 colunas, você pode adicionar outro columnelemento e apenas alterar a largura no CSS de acordo (exemplo: 3 colunas devem ter width: 33.3333%;etc.) e você também pode aplicar seu próprio clearfix ao containerelemento, nesse caso, você deve remover a cfclasse como bem. Além disso, aqui está o violino como exemplo ao vivo.

Se você quiser ler mais sobre esta solução ou ver outros exemplos, visite este incrível link .

HTML

<div class="container cf">
    <div class="column col1">
        <h2>Column 1</h2>
        <p>Lorem ipsum text1</p>
        <a class="bottom-element" href="">Action</a>
    </div>
    <div class="column col2">
        <h2>Column 2</h2>
        <p>
        Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, 
        Lorem ipsum text2
        </p>
        <p>
        Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, 
        Lorem ipsum text2, Lorem ipsum text2, Lorem ipsum text2, 
        Lorem ipsum text2, Lorem ipsum text2
        </p>
    </div>
</div>

CSS

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.container {
    display:table;
}
.column {
    display:table-cell;
    position: relative;
    padding: 4px;
    width: 50%;
}
.col1 { background: #48b5f9; }
.col2 { background: #edc682; }

.bottom-element {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

tablee table-celldefinir o comportamento de elementos para ser como tabela HTML básico, o que nos permite usar vertical-alignem todo o conteúdo dentro de determinada coluna, e position: relative;em colunas nos permite posição bottom-elementcom absolutee aplicar o posicionamento em relação ao exterior div.

Espero que tenha sido útil e se você tiver alguma sugestão ou uma solução melhor, escreva um comentário =)