Regra
Criar um Rodapé Utilizando apenas conceitos básicos em HTML e CSS
Nível de Dificuldade:
Básico.
Pré-requisitos:
Conhecimento inicial sobre HTML e CSS.
Para criar um rodapé que deixa nosso site sempre bonitinho é simples:
Código HTML:
<html> <head> </head> <body> <div class="tudo"> <div class="topo"></div> <div class="conteudo"></div> <div class="rodape"></div> </div> </body> </html>
Código CSS:
<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
height:100%;
}
.tudo {
min-height:100%;
position:relative;
}
.topo {
background:red;
padding:40px;
}
.conteudo {
padding:10px;
padding-bottom:60px;
}
.rodape {
position:absolute;
bottom:0;
width:100%;
height:90px;
background:blue;
}
</style>
</head>
<body>
</body>
</html>E Para Concluir o HTML E CSS Juntos:
<html>
<head>
<style type="text/css">
body {
margin:0;
padding:0;
height:100%;
}
.tudo {
min-height:100%;
position:relative;
}
.topo {
background:red;
padding:40px;
}
.conteudo {
padding:10px;
padding-bottom:60px;
}
.rodape {
position:absolute;
bottom:0;
width:100%;
height:90px;
background:blue;
}
</style>
</head>
<body>
<div class="tudo">
<div class="topo"></div>
<div class="conteudo"></div>
<div class="rodape"></div>
</div>
</body>
</html>
Fazendo tudo corretamente você verá o resultado, esta é considerada a maneira mais fácil de se fazer um rodapé. Espero que tenham gostado.
