
Ter um rodapé no site é algo que não conseguimos nos imaginar sem. Porém, este pode se tornar dor de cabeça, quando não feito de forma correta. Quando falando de sites, veja bem, site e não blog, muitas das vezes nos deparamos com situações em que não temos conteúdo suficiente para preencher toda extensão vertical do navegador e, nestes casos, o nosso footer sobe para o meio da tela, deixando o site complemente descaracterizado. Hoje aprenderemos a sanar essa dor de cabeça! Abra seu escritor de código preferido e mãos à obra.
Suponhamos o seguinte HTML de um site qualquer:
01.
<
html
>
02.
<
head
>
03.
</
head
>
04.
05.
<
body
>
06.
<
div
class
=
"wrap"
>
07.
<
div
class
=
"header-container"
>
08.
09.
</
div
>
<!-- .header-container -->
10.
11.
<
div
class
=
"footer-container"
>
12.
13.
</
div
>
<!-- .footer-container -->
14.
</
div
>
<!-- .wrap -->
15.
</
body
>
16.
</
html
>
01.
html, body, .wrap{
02.
overflow-x:
hidden
;
03.
height
:
100%
;
04.
}
05.
06.
body > .wrap{
07.
height
:
100%
;
08.
min-height
:
100%
;
09.
}
10.
11.
.wrap{
12.
position
:
relative
;
13.
min-height
:
100%
;
14.
height
:
auto
!important
;
15.
height
:
100%
;
16.
}
17.
18.
.header-container{
19.
width
:
978px
;
20.
height
:
200px
;
21.
background
:
#123456
;
22.
}
23.
24.
.footer-container{
25.
width
:
100%
;
26.
height
:
auto
!important
;
27.
position
:
absolute
;
28.
clear
:
both
;
29.
bottom
:
0
!important
;
30.
padding-bottom
:
5px
;
31.
background
:
#357531
;
32.
}
Bom, testem o código, trocando as cores das divs para entender melhor a localização de cada uma.
Até a próxima.
Deu pra ajudar, Obrigado!
ResponderExcluiro meu n fica ele fica no meio da pagina
ResponderExcluirEu não manjo muito de html e css. Sou bem novo nesse ramo. Bom eu precisava fazer um rodapé parecido com esse aqui mirago.com.br
ResponderExcluirVocê poderia me ajudar?