Iframe Auto Ajustável "height" !

[Thiago Ribeiro]

Estou tendo problemas sérios para conseguir montar uma web... =\

Basicamente eu desenvolvi o index com o cabeçalho onde fica o menu, e o rodapé... O centro da página coloquei um iframe dando load direto em uma outra página, mas eu preciso que ao clicar nos botões do menu ele troque somente o iframe do centro mas que ele ajuste a sua altura conforme a página carregada interna.

Já encontrei alguns códigos com javascript deixando o height="100%" mas não funciona... :unsure:

Ele ajusta corretamente o "width" mas parece que ele trava a altura em ± uns 200px automáticamente.

Ainda sou muito iniciante com isso. E não sei se montei na estrutura certa também. Criei 3 tables porque me parecia mais fácil inclusive para fazer a separações dos botões do menu, porque ainda não me acostumei usar "colspan e rowspan".

table 1 = menu

table 2 = iframe

table 3 = rodapé

Será que alguém tem como me ajudar fazer esse table que tem o iframe ajustar a altura dele automáticamente?!? E também será que é possível dessa maneira que eu fiz... :blink:

Agradeço desde já toda e qualquer ajuda...

Thiago Ribeiro

[Guest Visitante]

olha aqui

[Thiago Ribeiro]

Cara tentei também dessa forma indicada mas não consegui. Depois de apanhar bastante com isso consegui achar um código que funcionou para o que eu preciso. Se caso interessar a alguém o código é o seguinte:

- java script:

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=getFFVersion>=0.1? 16 : 0; //extra height in px to add to iframe in FireFox 1.0+ browsers

function dyniframesize()
{
    var dyniframe=new Array();
    
    for (i=0; i<window.frames.length; i++)
    {
    
        if (document.getElementById)
        { //begin resizing iframe procedure
        
            dyniframe[dyniframe.length] = document.getElementById(window.frames[i].window.name);
            
            if (dyniframe[i] && !window.opera)
            {
    
                dyniframe[i].style.display="block";
                if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
                {
                    dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight+FFextraHeight;
                }
                else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
                {
                    dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
                }
            }
        }
    }
}

- HTML:

<iframe name=" " id=" " onload="dyniframesize();" src=" .html" width="XXX" scrolling="no" frameborder="0"></iframe>

Abraço,

Thiago Ribeiro

[jairpc]

Preciso de ajuda...

 

Problema e que se eu especificar um valor para largura, a  pagina em que o iframe esta inserido, apos diminuir o tamanho do navegador, ela não aparece responsiva.

colocando largura em 100%: A altura da janela em que o iframe esta inserido , ao diminuir o tamanho do navegador,  aparece maior do que o conteudo da pagina.

 

 

alguém poderia s dispor de um momento pra me ajudar?

Obrigado

[Stoma]

19 minutos atrás, jairpc disse:

colocando largura em 100%: A altura da janela em que o iframe esta inserido , ao diminuir o tamanho do navegador,  aparece maior do que o conteudo da pagina.

Como assim? Nesse caso você trocou a largura, mas a altura também foi modificada?

Tem algumas formas de fazer, exemplo:

1 - Você pode fazer usando JavaScript e o evento onresize (ele é disparado quando o browser muda de largura/altura), assim quando o browser for redimensionado você altera as dimensões do iframe;

http://www.w3schools.com/jsref/event_onresize.asp

2 - Você pode fazer por CSS, deixando o iframe com position absolute e left/right/top/bottom 0px, mas se você tiver mais elementos além do iframe, isso provavelmente vai alterar algo nesses elementos e você vai ter que corrigí-los;

 

Recomendo você criar outro tópico porque este é de 9 anos atrás e o código que está neste tópico está defasado.

[Gabriela Silva]

Olá encontrei o seguinte problema:

Tenho que inserir a seguinte  iframe :

<iframe style="height:auto;width: 100% ;height:560px;" "overflow-y:hidden" src="https://www.e-agencias.com.br/ag76785" width="900" frameborder="0" scrolling="0"></iframe> 

Mas a pagina inicial aparece ajustado a tela porém quando faz pesquisa o resultado da pesquisa não se ajusta a tela e aparece uma barra de rolagem extra. 

Como fazer para o conteúdo preencher toda a tela e não aparecer essa barra de rolagem extra?

[Gabriela Silva]

 Olá, preciso de uma grande ajuda. Eu estou com um grande problema. Tenho que inserir essa iframe: 

<iframe style="height:auto;width: 100% ;height:560px;" "overflow-y:hidden" src="https://www.e-agencias.com.br/ag76785" width="900" frameborder="0" scrolling="0"></iframe> 

Preciso que resultados de pesquisa feitos nessa iframe sempre se ajustem a tela sem ter que existir outra barra de rolagem pois prefiro manter apenas a barra de rolagem do site.

 

Por favor me ajuda!