iframe height="100%" não funciona

Doug Chiara · Janeiro 16, 2010

Olá pessoal, estou fazendo um site com iframes, mas estou tendo dificuldades na altura, o valor 100% não é aceito, alguém pode me ajudar??

Segue o código da página:

<head>

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #000000;

}

-->

</style></head>

<tr>

</tr>

<tr>

>

</tr>

</table>

</html>

No topo e no menu_esquerdo ficam botões que carregam outras páginas com tamnhos diferentes no "corpo". Porém ficam cortadas.

As paginas menu_esquerdo e menu_direito também cortam.

Valor fixo fica muito ruim.

Alguém tem alguma idéia??

Obrigado desde já.

Norivan Oliveira · Janeiro 16, 2010

O valor do atributo height não pode ser 100%. O que você pode usar para isto é java script:

<script language="JavaScript">
<!--
function resize_iframe()
{

	var height=window.innerWidth;//Firefox
	if (document.body.clientHeight)
	{
		height=document.body.clientHeight;//IE
	}
	document.getElementById("glu").style.height=parseInt(height-
	document.getElementById("glu").offsetTop-8)+"px";
}


//-->
</script>


<iframe id="glu" width="100%" onload="resize_iframe()">
</iframe>

Doug Chiara · Janeiro 16, 2010

Certo.

Mas não conheço nada de javascript, tem como dar uma ajuda mais detalhada, onde coloco isso e como ligo ele nas 3 frames de baixo??? tem como??

Norivan Oliveira · Janeiro 17, 2010

Atribuindo a ela o id 'glu' e chamando a função 'resize_iframe()' no evento onload. Assim

Doug Chiara · Janeiro 17, 2010

Olá, muito obrigado até aqui Norivan.

É o seguinte... não consegui fazer funcionar com esse código não.

Mas achei outro código q consegui fazer funcionar em partes.

Segue:

<head>

<!--

function calcHeight()

{

//find the height of the internal page

var the_height=

document.getElementById('the_iframe').contentWindow.

document.body.scrollHeight;

//change the height of the iframe

document.getElementById('the_iframe').height=

the_height;

}

//-->

</script>

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #000000;

}

-->

</style></head>

<tr>

</tr>

<tr>

<td width="600"><iframe src="noticias.php" width="600" name="corpo" hspace="0" vspace="0"

id="the_iframe"

onLoad="calcHeight();"

scrolling="no"

frameborder="0"

height="1">

></iframe></td>

>

</tr>

</table>

</html>

O problema dele é que as 2 frames laterais estão abrindo centralizada verticalmente, e eu gostaria q elas abrissem no topo.

Tem como resolver isso??

kola · Janeiro 23, 2010

Olá pessoa... seguindo a linha do Doug, conseguimos resolver o problema da barra lateral e do redimensionamento do iframe, porém o conteúdo interno do iframe aparece centralizado na vertical, isso quando não há muito conteúdo. Quando o conteúdo preenche todo o espaço ele aparece alinhado no topo. Eu usei a posição absoluta, porém quando eu redimensiono a janela do navegador o conteúdo sobrepõe os menus do site, ou seja, um fram sobrepõe o outro.

Alguém tem alguma idéia do próximo passo?

Detalhe, fiz com resolução de 1280x1024, se alguém usar outra resolução já terá os frames desorganizados...

Se aguém puder dar uma luz... vlw!!

____________________________________________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Chiara Racing - Escuderia Chiara</title>

<!--

function calcHeight()

{

//find the height of the internal page

var the_height=

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;

//change the height of the iframe

document.getElementById('the_iframe').height=the_height;

}

//-->

</script>

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #000000;

}

-->

</style></head>

<tr>

</tr>

<tr>

<td width="600"><iframe

style="position: absolute; top: 25%; margin-top: -250;"

id="the_iframe"

onLoad="calcHeight();"

src="noticias.php"

width="600"

scrolling="NO"

frameborder="no"

name="corpo"

hspace="0"

vspace="0"

>

</iframe>

</tr>

</table>

</html>

Editado Janeiro 24, 2010 por kola

kola · Janeiro 24, 2010

RESOLVIDO.

Obrigado pela ajuda inicial, deu um up pra chegar aqui... segue a solução no código abaixo.. a linha em azul substituiu a linha em cinza.

abs

<td width="600"><iframe

style="position: absolute; top: 228px; width: 588px;"

style="position: absolute; top: 25%; margin-top: -250;"

id="the_iframe"

onLoad="calcHeight();"

src="noticias.php"

width="600"

scrolling="NO"

frameborder="no"

name="corpo"

hspace="0"

vspace="0"

>

</iframe>

Doug Chiara · Janeiro 26, 2010

Isso ae Kola... vlw meu velho.

Pegou o barco agora e já tá em mar aberto.

você é o cara!!!

Entrar

iframe height="100%" não funciona

Pergunta

Doug Chiara

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

Norivan Oliveira

Link para o comentário

Compartilhar em outros sites

Doug Chiara

Link para o comentário

Compartilhar em outros sites

Norivan Oliveira

Link para o comentário

Compartilhar em outros sites

Doug Chiara

Link para o comentário

Compartilhar em outros sites

kola

Link para o comentário

Compartilhar em outros sites

kola

Link para o comentário

Compartilhar em outros sites

Doug Chiara

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades