Ir para conteúdo

POWERED BY:

Arquivado

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

mrguz

Automatizar Redimensionamento

Por , em Desenvolvimento frontend

Recommended Posts

mrguz    0

mrguz
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

mrguz    0

mrguz
Postado

Após varias visitas e nenhuma resposta, eu acho que não consegui explicar direito.

Vamos ver se consigo explicar melhor:

 

 

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://forum.imasters.com.br" frameborder="no"></iframe>
               </div>          
               <div id="footer">rodape</div>
       </div>
</body>
</html>

 

Algum moderador poderia deixar esta explicação lá em cima e apagar a primeira tentativa de explicar.

Creio que aqui consegui expor o problema com maior clareza.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mrguz    0

mrguz
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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

Okay, eu não tinha visto o tópico ainda.

 

mas você deve começar por colocar o rodapé no final da ppagina:

http://maujor.com/tutorial/rodape-embaixo-da-janela.php

 

daí, posicione o rodape na div conteudo, de uma forma que essa div não cresça.

dessa forma você chegará no efeito que quer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mrguz    0

mrguz
Postado

Então Willian Bruno, na verdade tanto o header no topo quanto o footer no rodapé eu consegui beleza.

Basta voce conferir o meu codigo copiando e sanvando com html e testar.

 

O único problema é realmente com o iframe ou com a div content.

\não estou conseguindo fazer com que ocupe todo o espaço restante do meio, onde ficaria o conteudo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sergio Tomas    16

Sergio Tomas
Postado

Então Willian Bruno, na verdade tanto o header no topo quanto o footer no rodapé eu consegui beleza.

Basta voce conferir o meu codigo copiando e sanvando com html e testar.

 

O único problema é realmente com o iframe ou com a div content.

\não estou conseguindo fazer com que ocupe todo o espaço restante do meio, onde ficaria o conteudo

 

Amigo ve se resolveu ai.

 

Faz o teste eu apenas tirei (posição:absolute;) do footer. e redimencionei o iframe em cm.

 

código aqui

<!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; 

} 
#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:20px; 
               text-align:center; 
               bottom: 0; 
} 
</style> 
</head> 
<body> 
       <div id="areatotal">     
               <div id="header">top</div>               
               <div id="content"> 
                       <iframe id="Conteudo"  width="100%" height="412cm"name="Conteudo" src="http://forum.imasters.com.br" frameborder="no"></iframe> 
               </div>           
               <div id="footer">rodape</div> 
       </div> 
</body> 
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

mrguz    0

mrguz
Postado

Então SST...

voce chegou a testar?

tirando o position:absolute a div footer não cola mais no final da pagina

e outro problema é que não podemos ter o iframe ou div content com height fixo

mas valeu pela tentativa. B)

 

Eu utilizei este link do maujor para colocar o footer no rodapé

rodapé colado embaixo na janela

 

Meu único problema realmente esta sendo com a div content onde recebe o iframe

como fazer para que ela tenha um height automatico :ermm:

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Esse tuto do Maujor vai te dar de graça o height automatico.

 

da forma que você fez não está correto.

não bastava só usar o absolute.

 

refaça olhando o tuto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mrguz    0

mrguz
Postado

ok testei o codigo na integra e a div clear fica com um heigth automatico porem ao jogar o iframe dentro não rola.

Estive pensando se alguem tem um script para pegar a altura da janela, retirar o valor dos dois divs e atribuir o restante ao div principal. :o

Compartilhar este post

Link para o post
Compartilhar em outros sites

mrguz    0

mrguz
Postado

Bom pessoal, após 11 dias e nenhuma solução estou trancando o tópico.

Vou partir para outras alternativas, pois creio ser impossível fazer isto com css :angry:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito