Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
Carregando comentários...