Quando você começar a aplicar o layout de um site usando HTML e CSS DIVs, você irá inevitavelmente cruzar com o seguinte problema:

Como faço para forçar duas colunas de ser da mesma altura?

Você deseja obter algo como isto:

Mas o que você faz, você não é capaz de estender a barra lateral até o rodapé. Você acaba com algo como isto:

Muitos sugeriram o uso de algumas técnicas CSS complicado de contornar o problema, enquanto que em nenhum fato das técnicas funcionam perfeitamente em todos os casos. É tedioso para fazer estes métodos de trabalho em muitas situações.

Alguns têm sugerido técnicas tais como ladrilhos uma imagem de fundo para dar uma falsa impressão de colunas de comprimento. Esta técnica é chamada de colunas faux . Este corte quase funciona, mas você sabe - é um truque sujo demais.

As pessoas sempre desprezam usando uma solução baseada JavaScript para esse problema. Não sei porquê, mas deixem-me dizer a verdade - uma solução baseada JavaScript para esse problema não é pior do que qualquer outra solução. De fato, se você estiver usando JavaScript, você pode economizar algumas horas de frustração de tentar fazer as coisas funcionarem. As pessoas irão adverti-lo contra isso, dizendo "O que acontecerá se o usuário JavaScript desligado?". Acredite, se o usuário tem JavaScript desativado, a maioria dos web é quebrada por ele mesmo. Barra lateral não se importa com ele. Não fingir que ele faz.

Aqui está como você pode contornar o problema usando JQuery:

Coloque algo como este no seu manipulador de eventos de pronto:

  $ (". Barra lateral") de altura. (Math.max ($(". conteúdo "). (Altura), $ (". Barra lateral "). ())); Altura 

É isso. Agora, começar a fazer as coisas em vez de mexer com todos esses pequenos detalhes, e parar de tentar usar o CSS para resolver todos os problemas louco.