Ir para conteúdo

Arquivado

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

rafaelcrvs

Deixar footer 100% na página

Por , em Desenvolvimento frontend

Recommended Posts

rafaelcrvs    3

rafaelcrvs
Postado

Olá pessoal,

 

Estou com uma dúvida:

 

Atualmente quando eu abro a minha página, aparece este baita espaço em branco:

 

http://screencast.com/t/Y4SuTKMO1Sii

 

Quando eu acesso no notebook, este espaço diminui um pouco, então acredito que dependa da resolução do monitor.

 

Mas tem como deixar a página 100% para que não apareça esse espaço em branco em qualquer monitor?

 

Att,

Rafael

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Santos Brito    12

Lucas Santos Brito
Postado

Tente desta forma. Defina a propriedade 'height' em 100% para o elemento 'body' e o 'html', assim:

html, 
body {
   height:100%;
}

Envolva todo o conteúdo 'filho do body', num outro elemento (o nome fica ao seu gosto, eu escolhi 'page-wrp'), desta forma:

<html>
<head>
<title>Titulo da Pagina</title>
</head>
<body>

<div class='page-wrp'>

<!-- TODO O RESTANTE DO SITE DEVERÁ VIR AQUI (INCLUSIVE O RODAPÉ) !-->

   <div class='footer'></div><!-- RODAPÉ !-->

</div><!-- FIM DA PAGE-WRP !-->


</body>
</html>

Utilize no elemento 'page-wrp' a propriedade 'min-height' e a defina como 100%, defina o posicionamento do footer como absoluto, e bottom 0, desta forma:

.page-wrp {
	min-height:100%;
	position:relative;
	width:800px; /* O width fica a seu critério */
}
 
.footer {
	position:absolute;
	bottom:0;
	width:100%;
}

E certamente resolverá seu problema.

Poste o resultado, abraços.

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