Ir para conteúdo

Arquivado

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

ScornInPC

Mais uma de height 100% - BANNER - RODAPE

Por , em Desenvolvimento frontend

Recommended Posts

ScornInPC    1

ScornInPC
Postado

Ola pessoal.

 

Bem, to ollhando o forum desde ontem a noite, e ainda não consegui arrumar isso.

quero fazer um layout liquid (eu acho) que se ajuste verticalmente.

bem, ja tentei de tudo, tudo mesmo.

tenho o seguinte layout.

 

<body>
		<div id="site">
			<div id="topo">topo</div>
			<div id="meio">MEIO</div>
			<div id="rodape">rodape</div>
		</div>
	</body>

 

Bem, a maneira que mais cheguei perto do que eu quero, é fazer o meio ter 100%, colocar padding-top=height(topo) e padding-bottom=height(rodape)

assim, o meio vai ter 100% realmente, mas só vai aparecer depois do topo, e antes do rodape =)

 

<style>
			html, body {
				margin: 0;
				padding: 0;
				height: 100%;
				text-align: center;
			}
			#site {
				margin: auto;
				text-align: left;
				width: 994px;
				height: 100%;
				z-index: 1;
			}
			#topo {
				position: absolute;
				top: 0;
				height: 144px;
				width: 994px;
				background-color: #FF0000;
				z-index: 3;
			}
			#meio {
				position: relative;
				padding-top: 144px;
				padding-bottom: 31px;
				background-color: #00FF00;
				height: 100%;
				width: 994px;
				z-index: 2;
			}
			#rodape {
				position: absolute;
				bottom: 0px;
				height: 31px;
				width: 994px;
				background-color: #0000FF;
				z-index: 4;
			}
		</style>

beleza, IE funciona, apesar de ser gambiarra (IE só funciona gambiarra ^^) mas no FF não funciona, claro, pq ele vai somar o rodape + topo.

 

Bem, alguem tem alguma solução pra isso? pq no forum, todas as soluções não chegam a lugar algum =)))

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

ScornInPC    1

ScornInPC
Postado

mas faux - collumns é pra deixar 2 colunas filhas do mesmo tamanho, não é?

 

-------------------
|	cabeçalho   |  144px
------------------
-------------------
|					 |
|	  Corpo	  |  100% - cabeçalho - rodapé
|					 |
-------------------
-------------------
|	 rodapé	  |  31px
-------------------

Compartilhar este post

Link para o post
Compartilhar em outros sites

ScornInPC    1

ScornInPC
Postado

aaa que nada =) essas coisas acontecem, principalmente na informatica, cada detalhinho ^^

 

normal =)

 

mais ainda não achei a solução =(

 

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

ScornInPc estou tentando o dia todo lhe ajudar mas ainda não consegui fazer esse efeito

só consegui com JAVASCRIPT... o que você acha dessa ideia??

deixa só lhe fazer uma pergunta por que fazer uma página redimensinavel na vertical??

é só por curiosidade que eu quero saber ;)

 

[atualizado]Conseguiiiii!!!

hehe espero que seja isso que você queira:

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

ScornInPC    1

ScornInPC
Postado

AHEuAheuAHeUAHeuHAe caraca véio 100% =)

 

deixa eu ver se eu entendi:

 

o principio do meu é o mesmo certo? ter uma div 100%, só que ela só iirá subir o height do rodapé

e colocar uma 2ª div, que irá começar depois do topo.

 

 

Nossa, bem engenhoso =) (gabiarrinha ^^_)

 

valeu fox ^^_

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

de uma boa lida mais na parte CSS e você entenderá melhor ainda tive de aplicar até margin-top:[margem];

valew ^^ qualquer duvida volte a postar

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

ScornInPC    1

ScornInPC
Postado

Bem, a idéia do tópico realmente ta resolvida, e eu troquei o layout que estava fazendo. Porem, ja que noutro post, você pediu pra eu fazer o layout, achei massa, e voltei a mexer nele outra vez, e a coisa ficou mais feia do que eu pensava.

 

Pra fazer aquele layout, eu preciso seguir estas etapas.

 

1° - beleza, até aqui beleza

(verde: height 100%, ele é o liquid)

Imagem Postada

 

2° - beleza, coloquei as caixas uma ao lado da outra, normal

(Amarelo e roxo com height 100%, "movivel")

Imagem Postada

 

3° - aqui é quem engrossa a coisa

(roxo e vermelho escuro com height 100% "movivel")

Imagem Postada

onde o verde escuro é a parte superior da "caixa" e azul escuro é inferior

o vermelho escuro, é o meio da caixa, com a imagem repetindo em Y.

 

deu pra sacar +/-?

só queria uma idéia de como fazer =) pq assim to achando que não compensa o trabalho hem =)

 

sentiu o grau da complicação?

bem, tentei id colocando um em cima do outro, como você fez, mas não da tando não, q q você acha? tem alguma idéia?

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