Automatizar Redimensionamento
Salve galera! B)
Tenho um problema que não estou conseguindo resolver:
a minha pagina tem 4 divs e dentro de um deles um iframe,
preciso deixar a div header no topo da pagina fixo(onde mais tarde irá os links de navegação.
no div content é onde coloquei o iframe para mostrar o conteudo que necessitar.
no div footer tenho o meu rodapé da pagina que deve ficar fixo lá em baixo.
O problema é:
o meu iframe deve ter o seu tamanho e altura em 100% do que sobrar da janela da pessoa que estiver navegando.
Ou seja ele deve ter o tamanho total - tamanho do header e footer para se autoajustar a tela.
pode dar rolagem ou melhor precisa dar rolagem no iframe e não na pagina.
testem o codigo abaixo e vão entender o que digo, só lembrando meu iframe não pode ter height fixo, porque não sei a resolução e nem se a pessoa esta ajustando a tela.
Alguem pode me dar um help? :ermm:
<!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://forum.imasters.com.br" frameborder="no"></iframe>
</div>
<div id="footer">rodape</div>
</div>
</body>
</html>Discussão (12)
Carregando comentários...