terça-feira, setembro 22, 2009

Elemento com altura de 100% do elemento pai com JQuery

Muitas pessoas fazem layout com tabela para que o tamanho fique controlado a 100% e possa usar um plano de fundo no comprimento inteiro. Mas não precisa usar tabela para isso. Se isso for necessário mesmo... de verdade (depende de como for montado o layout), você pode usar um JavaScript para ajustar o tamanho. Este é um exemplo em JQuery:

jQuery(document).ready(function(){
jQuery("#sidebar").height(jQuery("#sidebar").parent().innerHeight() + "px");
});


Meu elemento de id="sidebar" fica dentro de um outro elemento que possui conteúdo variável, com texto grandes. O sidebar não possui tamanho suficiente para ser maior e não terminar repentinamente os "frufrus" do plano de fundo. Este scriptsinho em jQuery faz com que, quando o documento estiver carregado, haja ajuste do tamanho do "sidebar" para o tamanho interno do "pai" (o elemento no qual está dentro).

Abraço!