Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bergs

[Resolvido] altura de div via javascript

Recommended Posts

estou tentando fazer uma página tableless com conteúdo dinâmico, eu quero que

quando o conteúdo aumente a div se redimecione conforme o

tamanho do conteúdo, a div onde se encontra o conteúdo esta se redimencionando

normalmente por css.

 

o problema esta na div pai que esta sumindo e assim subindo o rodapé da página,

gostaria de saber se tem como pegar o tamanho da div filho onde esta o conteúdo e passar

por javascript para a div pai.

 

já tentei com o seguinte código mas só funcionou no IE

<script type="text/javascript">
window.onload = function (){
var tamanho = document.getElementById("c").offsetHeight; // pega o tamanho da div filho
	if (tamanho){
	document.getElementById("conten2").style.height = (tamanho); // passa para a div pai o height da div filho 
	}
}
</script>

 

certamente o FF não esta reconhecendo o trecho

document.getElementById("conten2").style.height = (tamanho); // passa para a div pai o height da div filho 

 

alguém expert em js pode me ajudar como essa dor de cabeça?

mas que não seja usar tabelas!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Passei a fazer meus sites conforme a estratégia mostrada no site do maujor, que utiliza 3 colunas em tableless, que acompanham o conteúdo da coluna central:

http://www.maujor.com/layout3col.shtml

 

Fazer isso com tabelas é mais simples, pois toda a tabela acompanha o conteúdo da maior coluna, não sendo necessário mexer em nada no CSS praticamente. Embora o uso de tabelas seja muito mais simples, os padrões hoje sugerem o uso de Tableless, que é um pouco mais complicado. Porém, padrões são padrões...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estou procurando fazer páginas mais com position do que com float e esse seu exemplo não se encaixa no meu projeto, por ser todo em float e por ocupar toda a janela do navegador, já procurei vários artigos e ainda não encontrei a solução para o problema, preciso de uma solução em javascript/JQuery, se é que é possível.

 

Obrigado pela atenção.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu utilizo esse esquema justamente por não utilizar "float"! :o :o :o

Além disso, eu centralizo o site na tela e deixo do tamanho que eu quiser. Não ocupa toda a tela... :o :o :o

 

Exemplo de um site que fiz utilizando esse método: http://klonder.sytes.net

 

De todo modo, eu sugiro a evitar Javascript ao máximo nesse caso, uma vez que as divs acompanham o tamanho do texto sem problema algum, basta saber implementar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Foi a impressão a primeira vista, vou dar uma olhar com calma nos códigos referidos.

 

só uma pergunta:

manipulando como você disse, o layout fica se redimencionando ao conteúdo também?

 

e no meu caso a div interna esta acompanhando o conteúdo, mas a div pai não.

Compartilhar este post


Link para o post
Compartilhar em outros sites

manipulando como você disse, o layout fica se redimencionando ao conteúdo também?

 

Sim, por exemplo, no link que passei no post acima, todo o site tem a altura redimensionada de acordo com a coluna da direita (eu fiz com duas colunas apenas). Se você quiser fazer com 3 colunas, basta deixar como está no site do maujor.

 

A estratégia dele é muito boa, pois não utiliza float. Ele utiliza uma div dentro de outra, sendo que a div mais interna é a referente à coluna do meio, que geralmente é a que dita a altura do site. Desse modo, todas elas serão forçadas a acompanhar a coluna central.

 

Eu não gosto de utilizar "float", pois sempre fica algo a desejar. Já testei outras opções para que a altura das divs acompanhassem a maior, mas eu não achei que fossem a solução ideal. Testei esse site que passei acima no Internet Explorer 8, FF, Chrome e Opera, sem erros.

 

Sinceramente, trabalhar com tabelas é muito mais fácil, pois não há esse tipo de dor cabeça. O padding é interno, impedindo que o site aumente para os lados e perca a resolução inicial... Entretanto, tableless está na moda... vamos utilizá-lo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.