Ir para conteúdo

Arquivado

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

Raphael Marques Garcia

Navegador Chrome, CSS, JS e height 100%

Recommended Posts

Boa tarde, estou com um problema no meu código onde o INDEX se resume a algumas "<div>" e 3 partes. Topo, com logo e menu em perfeito estado, no centro temos um "<iframe>" que é o problema e por fim temos o rodapé da página onde temos um menu vertical e uma prévia descrição da empresa e dos serviços, também funcionando perfeitamente.

 

Utilizei o <iframe> na intenção de não precisar mexer no MENU de cima, no MENU VERTICAL ou da DESCRIÇÃO DA EMPRESA em todas as páginas, caso haja alteração.

 

A tag <iframe> ficou assim:

 

<iframe id="idiframeindex" name="iframeindex" allowtransparency="no" width="100%" height="100%" frameborder='0' hspace="0" scrolling="no" src='home.html' marginheight="0" marginwidth="0" vspace="0" hspace="0" onload="calcHeight();"></iframe>

 

Nos scripts acrescentei o JS:

 

<script language="JavaScript">
function calcHeight()
{
//encontra a altura da página que será exibida no iFrame
var the_height=
document.getElementById('idiframeindex').contentWindow.
document.body.offsetHeight;
//muda a altura do iframe
document.getElementById('idiframeindex').height=
the_height + 50; //esse "+50" faz com que a altura ultrapasse um pouco a da pagina interna. Dessa forma, você evita que o iFrame fique móvel ao selecionar seu conteúdo.
}
</script>
E por fim, no CSS:
#idiframeindex{
position: relative;
width: 100%; <!-- a mesma do iFrame -->
height:auto;
min-height: 350px; <!-- altura mínima para alguns navegadores -->
_height: 350px; <!-- altura mínima para IExplorer -->
}

 

Vamos ao erro:

No Google Chrome, só identifica a altura mínima, no caso de 350px, ou seja, a página que aparece no iframe só aparece 350px.

No IE ele faz tudo perfeito, calcula o tamanho da página que vai aparecer no iframe e então dimensiona o iframe no tamanho da página + 50px de margem, estipulado pelo JS. Mesmo que eu navegue por 5 páginas, ele calcula sempre.

 

Fiz tudo isso porque o simples "height: 100%" na tag <iframe> não era o suficiente para o Chrome, mesmo assim o erro persiste, só o IE se saiu bem nessa. Não testei no Firefox pois nem o tenho no momento.

 

Alguém poderia me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

usando iframe ? usa php e ajax pra poder carregar as paginas, se e isso q você ta fazendo com o iframe.

 

mais tenta colocar um max-width no lugar do width:100%

Guilomaker, agradeço a ajuda mas, não tenho experiências com PHP ou AJAX. Este site em questão, não precisa de muita frescura, é só um "quebra-galho" pois o site atual que estão usando é ridículo. Pode ser que o modelo seguinte seja mais "sofisticado".

Compartilhar este post


Link para o post
Compartilhar em outros sites

entendeu! espero que tenha resolvido seu problema quanto ao width

Na verdade, a dica não funcionou, troquei o width por max-width e não funcionou. O google chrome continua dando o mesmo erro.

 

Sobre o PHP ou AJAX, como eu disse antes, não tenho o mínimo conhecimento para usa-los.

Se souber de outra dica, agradeço!

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.