Ir para conteúdo
Fórum Script Brasil
  • 0

iframe height="100%" não funciona


Doug Chiara

Pergunta

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:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #000000;

}

-->

</style></head>

<table width="1020" border="0" align="center" cellpadding="0" cellspacing="5">

<tr>

<td colspan="3"><iframe src="topo.php" width="1020" height="210" frameborder="no" scrolling="no"></iframe></td>

</tr>

<tr>

<td width="210"><iframe src="menu_esquerdo.php" width="210" height="100%" frameborder="no" scrolling="no" name="menu_esquerdo" hspace="0" vspace="0"></iframe></td>

<td width="600"><iframe src="noticias.php" width="600" height="100%" frameborder="no" scrolling="no" name="corpo" hspace="0" vspace="0"></iframe></td>

>

<td width="210"><iframe src="menu_direito.php" width="210" height="100%" frameborder="no" scrolling="no" name="menu_direito" hspace="0" vspace="0"></iframe></td>

</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á.

Link para o comentário
Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

  • 0

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>

Link para o comentário
Compartilhar em outros sites

  • 0

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

<iframe src="noticias.php" width="600" frameborder="no" scrolling="no" name="corpo" hspace="0" vspace="0" id="glu" onload="resize_iframe()"></iframe>

Link para o comentário
Compartilhar em outros sites

  • 0

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:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script language="JavaScript">

<!--

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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<style type="text/css">

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #000000;

}

-->

</style></head>

<table width="1020" border="0" align="center" cellpadding="0" cellspacing="5">

<tr>

<td colspan="3"><iframe src="topo.php" width="1020" height="210" frameborder="no" scrolling="no"></iframe></td>

</tr>

<tr>

<td width="210"><iframe src="menu_esquerdo.php" width="210" height="100" frameborder="no" scrolling="no" name="menu_esquerdo" hspace="0" vspace="0"></iframe></td>

<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>

>

<td width="210"><iframe src="menu_direito.php" width="210" height="370" frameborder="no" scrolling="no" name="menu_direito" hspace="0" vspace="0"></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??

Link para o comentário
Compartilhar em outros sites

  • 0

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

&lt;script language="JavaScript">

<!--

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>

<style type="text/css">

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #000000;

}

-->

</style></head>

<table width="1020" border="0" align="center" cellpadding="0" cellspacing="5">

<tr>

<td colspan="3"><iframe src="topo.php" width="1020" height="210" frameborder="no" scrolling="no"></iframe></td>

</tr>

<tr>

<td width="210"><iframe src="menu_esquerdo.php" width="210" height="800" frameborder="no" scrolling="no" name="menu_esquerdo" hspace="0" vspace="0"></iframe></td>

<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>

<td width="210"><iframe src="menu_direito.php" width="210" height="800" frameborder="no" scrolling="no" name="menu_direito" hspace="0" vspace="0"></iframe></td>

</tr>

</table>

</html>

Editado por kola
Link para o comentário
Compartilhar em outros sites

  • 0

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>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...