como saber a altura da div?

[misterviralata 0]

Ola amigos!

 

estou buscando um texto do meu banco de dados mysql com php, e estou colocando o texto dentro de uma div.

 

Gostaria de saber se tem alguma maneira de saber qual a altura que a div ficou depois de preenchida com o texto.

 

Preciso de pegar o valor da altura da div e colocar dento de uma variavel php exemplo.

 

<div id="tamanho" style="height:;">
 texto que vem do banco de mysql
</div>

 

tentei assim mas não consegui

 

<?php $altura= ?><script>height = document.getElementById("tamanho");</script><?php; ?>

Obrigado!

[William Bruno 1501]

Na verdade... pelas propriedades da DIV.. você nem precisa fazer isso.

Pois ela vai aumentar o height, (automático), se você não declarar.

 

<div id="tamanho" style="height: auto;">

Por default, niveis de bloco já vem com valor auto de height.

mas se quer testar em Javascript.... veja com offsetHeight

[misterviralata 0]

Ola William Bruno

 

pesquisei aqui mesmo no forum e encontrei um exemplo com offsetHeight

 

<div id="teste">
teste<br>
teste<br>
teste<br>
teste<br>
teste<br>
</div>
<br />
<a href="#" onclick="alert(document.getElementById('teste').offsetHeight)">Altura</a>

Quando eu dou um clique no link uma mensagem com o valor da altura da div é exibida.

 

Você sabe como devo fazer para colocar este valor dendro de uma variavel do php?

 

Obrigado!

[William Bruno 1501]

Somente com AJAX... agora diz.. pra quê isso ?

 

JS não vai conversar com o php assim...

[misterviralata 0]

William Bruno

 

Você tem algum exemplo de como pegar este valor com ajax?

 

Procurei um tempão no google e não achei nada!

 

você quer saber pra que isso. Tenho uma pagina com uma iframe eu quero que o iframe aumente o tamanho de acordo com o conteudo da pagina que ela está chamando.

Consegui fazer isso com com html e javascript veja:

 

frame.html

<iframe  id="teste" src="pagina.html" width="500" height="100%"></iframe>

pagina.html

<div id="tamanho">

<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>

</div>

<script language="JavaScript" type="text/javascript">
  parent.document.getElementById("teste").height = document.getElementById("tamanho").scrollHeight + 40; //40: Margem Superior e Inferior, somadas
</script>

Desta forma a iframe ta com a altura de acordo com o conteudo, até aqui otimo.

 

O problema é que na pagina chamada pela iframe, tenho que usar div com posição absoluta, e quando uso posição absoluta o exemplo acima não funciona.

 

Da uma olhada; imagine que eu queira que o conteudo que está dentro da div começe com 50px em relação ao top e 100px em relação a margem da pagina . o resultado é que a div vai estar nas coordenadas desejadas, porem a iframe não vai ter a altura da pagina chamada.

Deu para entender?

 

então eu pensei será que tem uma forma de pegar o valor da altura da div e colocar em uma variavel php, assim eu passo o valor para dentro da função DIV e tudo fica certo!!!

 

Caso você puder me ajudar, fico grato!!!!

 

pagina.php

<?php
DIV(100,10,0,0,1,'#FFFFFF','#000000',0,'center');
echo '<div id="tamanho">';
echo '</div>';

DIV(200,'',50,30,1,'#FFFFFF','#000000',1,'center');
echo '<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>
<h1>TESTANDO<h1>';
echo '</div>';

echo '</div>';

function DIV($x,$y,$x2,$y2,$z,$cor,$cBorda,$exBorda,$align){

echo '<div style="';
echo 'position:absolute;';
echo 'width:'.$x.'px;';
echo 'height:'.$y.'px;';
echo 'margin-left:'.$x2.'px;';
echo 'margin-top:'.$y2.'px;';
echo 'z-index:'.$z.';';
echo 'visibility: visible;';
echo 'background-color:'.$cor.';';
echo 'border-style: solid;';
echo 'border-color:'.$cBorda.';';
echo 'border-width:'.$exBorda.'px;';
echo 'text-align:'.$align.';';
echo '">';
   
return;
}
//-------------------------------------

?>
<script language="JavaScript" type="text/javascript">
  parent.document.getElementById("teste").height = document.getElementById("tamanho").scrollHeight + 40; //40: Margem Superior e Inferior, somadas
</script>