Ir para conteúdo

POWERED BY:

Arquivado

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

T.Benichio

[Resolvido] Altura dinâmica do div central

Por , em Desenvolvimento frontend

Recommended Posts

T.Benichio    0

T.Benichio
Postado

Pessoal, faz uma semana que estou apanhando disso, já vi vários vídeos e vários exemplos e não consegui resolver...

 

Vejam o código abaixo:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste</title>
<style>
	html { height: 100%; }
	body {
		background-color: #fff;
		height: 100%;
		margin: 0px;
	}
	#topo {
		height: 100px;
		background-color: #ccc;
	}
	#centro {
		width: 970px;
		min-height: 100%;
		height: auto;
		margin: auto auto;
		background-color: #E8ECF0;
	}
	#rodape {
		height: 100px;
		background-color: #ccc;
	}
</style>
</head>
<body>
<div id='topo'>topo</div>
<div id='centro'></div>
<div id='rodape'>rodape</div>
</body>
</html>

 

Estou rodando isso no Chrome, no IE não funciona nada...

 

O que está acontecendo é que a DIV "centro" fica com o tamanho 100% do navegador, criando barra de rolagem mesmo não tendo nenhum conteúdo.

Eu queria que essa DIV ocupasse somente o espaço entre a DIV "topo" e a "rodape", e que ela empurrasse o rodapé, fazendo aparecer a barra de rolagem, somente se o conteúdo for maior que o tamanho da janela... consegui explicar?

Dentro dessa DIV "centro" eu vou colocar mais 3 DIVs, formando 3 colunas, então essa DIV também teria que ser redimensionada se o conteúdo das DIVs de dentro dela ficarem maior...

Como eu faço isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Benichio    0

T.Benichio
Postado

o problema ai é o min-height: 100%; na div #centro... tira ele que resolve.

 

João, obrigado pela resposta, mas desse jeito, se o conteúdo for pouco, a DIV "centro" não empurra o rodapé até em baixo da janela.

A ideia é que tenha um topo, um rodapé, e a DIV "centro" ocupe todo o restante do meio da página, mesmo se o conteúdo não for suficiente para empurrar a DIV até o final da página, e se o conteúdo for maior, a DIV "centro" vai empurrando o rodapé pra baixo e aparece a barra de rolagem...

Compartilhar este post

Link para o post
Compartilhar em outros sites

T.Benichio    0

T.Benichio
Postado

Muito bom esse site do Maujor, além desse link que Giovani passou, li sobre algumas outras coisas que me ajudaram a resolver o problema, como faux collumns e posicionamento relativo e absoluto...

 

Dúvida resolvida!

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