layout liquido na vertical

[brcontainer 16]

Nosso colega ScornInPC apareceu com uma ideia diferente neste tópico:

Mais uma de height 100% - BANNER - RODAPE

 

ao inves de um layout liquido(que redimensiona conforme o navegador) na horizontal que tal fazer um na vertical, mas o problema é que o TOPO(banner) e o rodape tem de ter tamanhos fixos não podem ser em porcentagem

e display:block;(para simular "width:100%;") não serve para aplicações verticais

 

então foi tentando resolver esse dilema que resolvi fazer uma gambiarra, depois de 30 hora tentando achei uma solução(gambiarra) seria usar valores negativos e position:absolute;

 

criei o topo normal e apliquei Z-INDEX:2;

logo apos criei o centro e nele apliquei Z-INDEX:1; para que fica-se abaixo do TOPO

em seguida criei o rodape com height:31px; porem height:100%; aumentava a altura =/ "criando"

barra de rolagem e deslocando o rodape muito para baixo

 

então coloquei top:; negativo no centro apliquei o valor conforme o rodape para que a página ficasse correta

assim top:-31px; mesmo valor do rodape porem negativo ae essa foi a primeira a "magica"

porem o conteudo do centro sumia pois o valor negativo fazia ele subir junto

ae vem a segunda magica

 

criei um elemento chamado interior o qual ficaria dentro do centro

e lhe apliquei margin-top:; com o mesmo valor do topo para que ele viesse abaixo na mesma

proporção

 

isso é meramente uma gambiarra, porem tem efeito satisfatorio mas não é ma solução totalmente boa

mas já é um começo

 

a seguir o código:

<style>
*{
margin:0px;
height:0px;
}
html,body{
width:100%;
height:100%;
}
#topo{
	width:500px;
	height:144px;
	background:#ff0000;
	position:absolute;
	z-index:2;
}
#centro{
	width:500px;
	height:100%;
	background:#00ff00;
	position:absolute;
	z-index:1;
	top:-31px;
}
#interno{
	height:auto;
	margin-top:174px;
}
#rodape{
	width:500px;
	height:31px;
	background:#0000ff;
	position:absolute;
	bottom:0px;
	z-index:4;
}
</style>
<div id="topo">topo</div>
	<div id="centro">
		<div id="interno">conteudo</div>
	</div>
<div id="rodape">rodape</div>

espero que tenham gostado

 

DESVANTAGEM:o conteudo que vai no #interno não redimensiona a página e o rodapé tambem não acompanha o texto

Ps.: ainda prefiro algo mais fixo, mas isso tudo é apenas uma ideia, quem sabe no futuro algo mais simples

e melhor formado...

[ScornInPC 1]

aheuaheuae legal o tuto, vai com certeza ser muito bem visitado.

 

bem, mas pro pessoal não ficar achando que eu sou maluco, vou mostrar meu layout, pra ter noção do pq ter um liquid vertical =)

 

Agora fica a duvida, eu sou maluco por ter pensado em fazer assim, ou o fox por ter perdido 30 horas pra fazer essa maravilha vidar realidade? hhauehaeuahe (brincadeira fox, você mandou muito bem nessa)

 

[brcontainer 16]

se tiver um link do seu layout ponha ele como exemplo :)

pode ser?

abraço

[e-Spider 0]

O Google Maps usa um layout líquido na vertical que caiu como uma luva para o problema deles. Gostaria de saber a técnica que eles utilizaram, alguém aqui sabe?

[GabrielFerrari 41]

O Google Maps usa um layout líquido na vertical que caiu como uma luva para o problema deles. Gostaria de saber a técnica que eles utilizaram, alguém aqui sabe?

 

 

e-Spíder

mantenha sua dúvida centrada em um lugar só.

E de preferencia na área para dúvida e não aqui em tutoriais

SEU TÓPICO JÁ FOI RESPONDIDO