Ir para conteúdo

POWERED BY:

Arquivado

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

Fernando_ramos

Fundo 100%

Por , em Desenvolvimento frontend

Recommended Posts

Fernando_ramos    0

Fernando_ramos
Postado

Amigos,

Boa tarde.

 

estou tentando fazer um layout em CSS e DIVs e estou encontrando alguns problemas.

Como teste simulei que o layout do meu site fosse ficar bem grande em altura, portando divido o mesmo em 3 partes.

 

  • Topo
  • Corpo
  • Rodape

e o CSS coloquei da seguinte forma:

 

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	height: 100%;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color: #CDDBF3;
	font-size:9px;
	margin: 0px 0px 0px 0px;
	text-align:center;	
}
html {
	height: 100%;
}
#SITE {
	width: 770px;
	height: 100%;
	background:url(../img/barras/fundo.gif) repeat-y center;
	text-align: center;
}
#TOPO {
	width: 750px;
	height: 225px;
	background-color:red;
}
#CORPO {
	width: 750px;
	height: 900px;
	background-color:blue;
}
#RODAPE {
	width: 750px;
	height: 80px;
	background-color:yellow;
}

e no HTML coloquei assim:

 

<body>


	<div id="SITE">
		<div id="TOPO">		</div>
		<div id="CORPO">		</div>
		<div id="RODAPE">		</div>
	</div>


</body>

o que esta acontecendo é que o 100% definido da altura esta marcando apenas o espaço inicial utilizado pelo navegador, ou seja, se a resolução for 800x600 ao carragar o site o fundo preenche toda a tela, mas quando rolo a barra de rolagem o fundo nao acompanha é cortado.

 

segue o link de exemplo

 

VEJA AQUI O EXEMPLO!

 

 

abraços!

 

Amigos,

Bom dia.

 

Estou querendo que o layout do meu site fique preenchido todo o site em altura.

 

A div topo e rodape, tem suas alturas definidas, mas o #CORPO é dinamico, então não sei sua altura, gostaria da ajuda dos amigos para saber como resolver esta pendencia!!

 

 

abraços!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Tomasi    0

Lucas Tomasi
Postado

Bom... eu testei aqui e consegui com que vá certo, mas eu usei outra imagem, então não sei se da o mesmo resultado com a tua imagem.

Eu fiz assim:

 

no #SITE, eu tirei o height:100%, ficando assim:

 

#SITE {
	width: 770px;
	background:url(fundo.jpg) repeat-y;
	text-align: center;
}

Da uma testa aí, e depois posta com o resultado...

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Tomasi    0

Lucas Tomasi
Postado

Bom... eu olhei o código e pensei assim... acho que esse height não deve existir, dái eu tirei e deu certo... mas não me pergunte porque eu pensei isso... hauahuaha

 

Acredito que com o height:100%, faz com que a imagem apareça só no espaço inicial do navegador...

Agora se você não declarar o height, ele segue o conteudo que tem dentro dele, daí ele vai até embaixo, no rodapé...

 

Eu nunca declaro o height numa div que englobe as outras, como a #SITE, acredito que fazendo isso, você não tera mais esse tipo de problema...

 

Espero ter ajudado...

 

Abraçoo

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

troque o height: 100%; por height:auto;

assim:

#SITE {
	width: 770px;
	height: auto;
	background:url(fundo.gif) repeat-y center;
	text-align: center;
	margin:0 auto;
}

qualquer duvida volte a postar

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

para a primeira pergunta:

#SITE {
	width: 770px;
	height: auto;
	background:url(fundo.gif) repeat-y center;
	text-align: center;
	margin:0 auto;
}

para a segunda pergunta defina uma altura minima e use height:auto;

faça assim:

#corpo{
	width: 750px;
	height: auto !important;
	min-height:500px;/*altura minima Firefox*/
	height:500px;/*altura minima Firefox IE*/
}

qualquer coisa volte a postar ;)

 

----

 

silverfox

Sem estar declarado o valor do height e declarar como height:auto, é o mesmo resultado né? Ou tem alguma diferença?

não há diferenças(que eu tenha encontrado =]), porem é recomendavel especificar uma altura

pois quando eu ia validar ele acusava erro acaso não houve-se altura definida

^_^ e para o caso como eu utilizei(min-height) é mais recomendavel ainda

 

falow abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fernando_ramos    0

Fernando_ramos
Postado

SilverFox,

Boa tarde.

 

não entendi essa parte:

 

para a segunda pergunta defina uma altura minima e use height:auto;
faça assim:

#corpo{
	width: 750px;
	height: auto !important;
	min-height:500px;/*altura minima Firefox*/
	height:500px;/*altura minima Firefox IE*/
}

na verdade ele pegou a altura de 500px. O que eu preciso é que ele tire o valor da altura do topo e do rodapé e o corpo seja preenchido com o restante que sobrou da tela!!!

 

abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

bem o seu conteudo do "meio"(corpo)

pode redimensionar o DIV??

 

acaso não seja isso (o conteudo não redimensione o DIV), siga esse link:

http://forum.imasters.com.br/index.php?showtopic=264130

 

qualquer coisa volte a postar ;)

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