iframe com redimensionamento automatico

mrguz · Junho 9, 2011

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 Junho 10, 2011 por mrguz

mrguz · Junho 14, 2011

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. ;)

Entrar

iframe com redimensionamento automatico

Pergunta

mrguz

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

mrguz

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades