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

iframe com redimensionamento automatico


mrguz

Pergunta

Tenho um problema que não estou conseguindo resolver:

a minha pagina tem 4 divs e dentro de um deles um iframe,

Div areatotal onde todo o site ficará dentro

Div header onde fica os menus de navegação, logo e banner colado la no topo da pagina

Div content onde ficara o iframe mostrando o conteudo de paginas do site ou pagina externa

Div footer onde fica o rodapé do site com alguns links e direitos autorais sempre colado lá em baixo no rodapé da pagina

O problema é:

está tudo perfeito a não ser o iframe.. ou seria a Div content?, que aparece de um tamanho fixo médio que não sei porque.

Se eu definir um height fixo no iframe do css como 900px ele passa pelo rodapé e o div footer não funciona a contento.

Preciso que o iframe ou a Div content tivesse o seu height automatico em 100% do restante do Layout.

No caso de usar Width:100% e height:100% na Div areatotal pego todo o tamanho da janela de navegação certo?

porque a Div areatotal deve ser igual ao tamanho da janela do meu navegador e não da resolução do monitor.

Ex. com valores ficticios da janela em 1000px X 700px :

Div areatotal = Width:100% e height:100% que vai pegar (width:1000px; height:700px;)

Div header = Width:100% e height:180px que vai pegar (width:1000px; height:180px;)

Div footer = Width:100% e height:40px que vai pegar (width:1000px; height:40px;)

Div content = Width:100% e height:100% que vai pegar (width:1000px; height:480px;) /* O 480px é = 700 - (180+40)dos outros divs

neste caso o iframe que é:

iframe = Width:100% e height:100% deveria ficar no mesmo tamanho de (width:1000px; height:480px;)

Detalhe não posso ter rolagem na pagina (Layout) se der rolagem só pode ser no iframe (daí não tem problema).

Será que estou esquecendo alguma coisa ou faltando algo?

Dá para fazer apenas no CSS ou precisa de Javascript, jQuery...?

Alguém pode me dar uma ajuda?

Segue o código abaixo para testes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*{      margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
}
html, body{     margin: 0px 0px 0px 0px;
                       padding: 0px 0px 0px 0px;
}
iframe{ margin: 0px 0px 0px 0px;
             padding: 0px 0px 0px 0px;
             border: none;
             text-align:center;
             width:100%;
             height:100%;
}
#areatotal{ min-height: 100%;
                  width:100%;
                  height:100%;
}
#header{background-color:#000060; color:#ffffff;
                width:100%;
                height:180px;
                text-align:center;
}
#content{background-color:#9999ff;
                width:100%;
                height:100%;
                text-align:center;
}
#footer{background-color:#000060;color:#ffffff;
                width:100%;
                height:40px;
                text-align:center;
                position:absolute;
                bottom: 0;
}
</style>
</head>
<body>
        <div id="areatotal">    
                <div id="header">top</div>              
                <div id="content">
                        <iframe id="Conteudo"  name="Conteudo" src="http://www.uol.com.br" frameborder="no"></iframe>
                </div>          
                <div id="footer">rodape</div>
        </div>
</body>
</html>

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

1 resposta a esta questão

Posts Recomendados

  • 0

Será que alguém tem o conhecimento necessário para resolver o problema? :huh:

Achei que fosse algo simples para programadores web experientes! :(

De qualquer forma, agradeço aos que tiveram boa vontade de ao menos olhar o post, mesmo não sabendo como resolver. ;)

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,4k
×
×
  • Criar Novo...