Div em 100% da tela

[kania 0]

Olá Pessoal, estou inciiando trabalho com div e já de cara peguei uma dúvida.

Como posso colocar uma DIV para 100% na horizont e na vertical.

Na horizontal eu vi que só não definir nada no CSS mas e na vertical?

 

Abaixo meu CSS

 

html { 
	background: url(../imagens/bg_html.jpg);
}
body {
	background: url(../imagens/bg_body.jpg) repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right:0px;
	margin-bottom:0px;
	text-align: center;
	line-height: 140%;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333; 
}
/*define o layout do bloco principal*/
#BoxPrincipal {
	padding: 100px;
	text-align: center;
}
/*box da imagem*/
#BoxImagem {
	text-align:center;
}
/*define o layout do bloco da direita*/
#BoxDireito {
	width: 250px;
	height: 250px;
	background-color:#0000FF;
	padding: 5px;
	float:right;
}
/*define o layout do bloco da esquerdda*/
#BoxEsquerdo {
	width: 250px;
	height: 250px;
	background-color: #0000FF;
	padding: 5px;
	float:left;
}
#Rodape { 
	clear: both; 
	border-top: 3px solid #7BBB15; 
	background: url(../imagens/bg_underground.jpg); 
	color: #FFF;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#996600;
	
}

A MONTAGEM DA MINHA DIV

 

<div id="BoxPrincipal">
	<div id="BoxImagem">
	<img src="imagens/inicio.png" width="650" height="400" /></div>
		
</div>
 <div id="Rodape">
  Auto Escola Orleans<br />
  Dirigindo a Vida<br />
  (41) 3272-1222 / (41) 3272-6948<br />
  autoescolaorleans@autoescolaorleans.com.br
</div>

Mas precisamente o que quero fazer é alinhar a DIV RODAPE na parte inferior da tela independete da resolução do visitante ou do tamanho da tela que estiver aberto.

 

Link de visualização http://www.autoescolaorleans.com.br/

[Aprendiz CSS 3]

Se for duas colunas

 

veja o primeiro post

 

se for uma só

 

veja o segundo

 

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

 

abraço

[GabrielLM 0]

Não entendi... você quer que uma div ocupe 100% da tela? Horizantalmente e verticalmente ao mesmo tempo?

 

No caso de fazer um rodapé que ocupe toda a tela na horizontal, você poe ela como uma div a parte, fora da div#tudo. No css, coloca width: 100%; dentro da div#tudo, ele ocuparia 100% da div, já fora, ocupa 100% do body. Quanto ao position, com absolute, a posição vai ser absoluta, e portanto, irá sobrepor tudo que for necessário para manter sua posição (bottom 0, no caso da position absolute, sempre no rodapé da TELA). Se você colocar relative, ela não irá sobrepor nada, estará sempre no fim da PÁGINA.

 

Não entendi na vertical. Você quer fazer aqueles fundos?

 

FUNDO | CONTEUDO | FUNDO

 

 

Sendo que o fundo deve sempre ocupar o que sobrar da tela horizontalmente e verticalmente?

Se for uma imagem uniforme, você pode simplesmente colocar como fundo do body:

 

body { background: url(fundobg.jpg) repeat; }

ou

 

body { background-image: url(fundobg.jpg); background-repeat: repeat; }

Se for uma imagem com degrade, você pode fazer com o fundo acompanhando a tela, enquanto rola.

 

body { background: url(fundodegrade.jpg) repeat-x fixed; }

ou

 

body { background-image: url(fundodegrade.jpg); background-repeat: repeat-x; background-attachment: fixed; }

Você faz uma imagem no tamanha da tela, com 1 px de largura, já que ela vai repetir no eixo X ( < --- > ).

 

Ou fazer ela ficar no topo da página, e uma outra imagem em baixo, sem degrade.

 

A imagem sem degradê, que ficara embaixo, deve ser feita de modo que possa se repetir em ambos os eixos (x y) e dê o efeito esperado. É so colocar várias cópias lado a lado e em cima tbm e ve se funciona.

Essa imagem vai como bg do body.

 

Ai tu faz um layout com 3 colunas.

 

<div id="eqd">

</div>

<div id="centro">

conteudo

</div>

<div id="drt">

</div>

 

Ai tu faz o layout flutuando à esquerda.

 

Define uma altura pra as divs que terão o fundo. A altura da imagem com degradê de preferência. e poe width: 100%, position: relative

 

E a div centro tu defini uma largura também.

 

Faz tempo que não faço desse ultimo modo ( foi só uma vez ) se não der certo posta ai.

[GabrielLM 0]

Não esquece de tirar margins e paddings

 

* { margin: 0; padding: 0; }

Ops, depois que vi o double post.