Publicado em 11 de jun.

Deixar footer 100% na página

#desenvolvimento-frontend

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

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Lucas Santos Brito· 12 de jun.

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

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

rafaelcrvs· 22 de jun.

Olá meu caro, eu vou tentar e deixarei a resposta aqui.

Me desculpa pela demora, estou ocupado com meu site.

Abraços,

Rafael