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>
