[Resolvido] Layout estilo programa

[Renan30 0]

Estou desenvolvendo a area administrativa de um site e o cliente quer que o layout fique parecendo um programinha dentro do browser. Mais ou menos assim:

-----------------------------

|header |

-----------------------------

| |

| |

| Conteúdo |

| |

| |

-----------------------------

|rodapé |

-----------------------------

 

O cabeçalho e rodape têm alturas fixas, ficando o cabeçalho no topo e o rodapé no bottom da tela, e o conteudo tem altura variavel de acordo com o tamanho do browser e cobrindo todo o espaço entre o cabeçalho e o rodapé. Caso haja muito conteudo, este deverá abrir um scroll(overflow: auto;) sem empurrar o rodape para baixo.

 

Acho que para colocar o overflow auto precisamos ter o height com um tamanho declarado, entretanto eu nao sei o tamanho porque não saberei a altura do browser que abrirá a aplicação. O cabeçalho fica em cima, o rodape em baixo, tenho que descobrir o comprimento entre o cabeçalho e o rodape e aplicar à altura do conteudo.

 

Muito obrigado,

 

Renan Layme

[mateusguitar1 0]

BOM por você não saber o tamanho da tela! deixe o rodape com position:absolute

e crie uma tabela para o conteudo ai você deixa ela com scroll

 

Espero ter ajudado ^^)

[Guilherme Müller 0]

Tem pelo menos duas formas de deixar o rodapé fixo no final da página. Se você usar position: absolute você vai perceber que não vai dar certo.

 

Você pode:

- Utilizar divs com a propriedade display: table para fazer o site se comportar como um site em tabelas (postei no meu blog sobre isso: http://guilhermemuller.com.br/blog/2011/02/22/como-montar-um-layout-com-tabelas-css/); Suporte em todos os navegadores exceto IE6 e IE7;

Ou

- Montar o site com uma div geral, dentro dela duas divs #cabecalho e #conteudo. Fora da div geral, coloque a div #rodape. Coloque a altura mínima da div geral como 100% (min-height: 100%). Fixe a altura do rodapé (ex: 20px) e na div #conteudo coloque margem negativa igual ao tamanho do rodapé (ex: margin-bottom: -20px). Assim o site ficará com altura 100% e o rodapé sobe para ficar em cima do site. Não é tão simples assim, tem que fazer alguns testes mas funciona.

[Renan30 0]

Obrigado pela ajuda, mas não funcionou.

 

Guilherme, tentei do seu jeito e o rodapé esta sendo empurrado para baixo ou para cima, dependendo do tamanho do conteudo.

O css depois das modificações sugeridas ficou assim...

div#layout3-body
{
width: 100%;
height: 100%;
min-height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
//border: 1px solid green;
}
div#layout3-header
{
clear: both;
width: 900px;
margin: 10px auto;
}
DIV#layout3-content
{
float: none;
clear: both;
width: 876px;
height: auto;
margin: 10px auto -75px;
padding: 10px;
background-color: #fff;
color: #000;
border: 2px solid #ccc;
}
div#layout3-footer
{
float: none;
clear: both;	
width: 900px;
margin: 10px auto;
position: absolute;
bottom: 0; 
//text-align:center;
}

 

e no html esta como você pediu: dentro da div #layout3-body está #layout3-header e #layout3-content e fora está #layout3-footer.

 

Lembrando: a altura do conteudo não pode ser pre-determinada, pois deve fluir de acordo com a altura da tela do usuario. O rodapé tem altura de 75px e fica bonitinho lá em cima. O rodapé tem, também, altura de 75px e o safado não pára em baixo e se pára, a div do conteudo fica ou muito longe dele ou passando por baixo.

E mais, o conteudo pode possuir infinitos elementos que crescerão apenas dentro dele com o uso de um scroll nele(na tela NÃO pode ter scroll, apenas na div conteudo).

 

Desculpem pessoal se estou abusando. É que estou perdido pra fazer esse layout estilo programinha.

 

Muito obrigado,

Renan Layme

[Guilherme Müller 0]

A dica que eu passei é para que o rodapé sempre fique no final da página, independente se o conteúdo é mais curto que a altura da tela, por exemplo.

 

Caso queira que o rodapé fique fixo na parte de baixo da tela, aí realmente a solução é utilizar position: absolute ou position: fixed. Porém para o conteúdo você terá que usar javascript para calcular a área correta a ser ocupada e aí utilizar overflow: auto para o conteúdo fluir dentro.

[Renan30 0]

Então só com css não dá para fazer o que eu queria? Droga!!!

 

Muito obrigado, pessoal.

 

Renan Layme.

[Eliseu M. 2]

Então só com css não dá para fazer o que eu queria? Droga!!!

 

Muito obrigado, pessoal.

 

Renan Layme.

 

Não, não dará para fazer só com CSS. Com JavaScript, é possível pegar as dimensões do viewport, que é a área visível do navegador (excluindo as bordas janela, as barras de favoritos, de endereço, etc.) e utilizá-las para redimensionar a DIV de conteúdo.

 

O topo e o rodapé ficarão fixos, então via JS, você deverá pegar a altura do viewport e subtrair as dimensões do topo e rodapé:

 

*Usando a dica para maior compatibilidade dada em http://css-tricks.co...ouse-postition/

var topo = document.getElementById("topo");
var rodape = document.getElementById("rodape");
var conteudo = document.getElementById("conteudo");

function getViewportHeight() {
  	if (window.innerHeight) {
      		return window.innerHeight;
  	} else if (document.body && document.body.offsetHeight) {
      		return document.body.offsetHeight;
  	} else {
      		return 0;
  	}
}

conteudo.style.height = getViewportHeight() - topo.style.height - rodape.style.height;

 

Procure inserir o código no final da página. Até mais!

[Renan30 0]

Muito obrigado mesmo, cara.

 

Eu estava querendo uma solução apenas a nivel de css, mas no fim das contas vou ter que usar javascript mesmo.

 

Renan Layme.

 

Ps: como colocar o post como [Encerrado]?