Posicionar Footer na Parte inferior do site.
Oi. Estou com uma dúvida, estou tentando posicionar o footer no fim da página na parte de baixo.
O código que estou usando é esse:
Exemplo HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grand Theft Auto - IV</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<div class="content">
<h1>Grand Theft Auto - IV</h1>
<p><strong>Grand Theft Auto IV</strong> é o <small>quarto jogo</small> da mais famosa franquia da <em>Rockstar</em>. O jogador assume o papel de <strong>Niko Bellic</strong>, um <small>europeu</small> que vai aos <strong>Estados Unidos</strong> em busca de melhores condições de vida e a fim de deixar seu passado aparentemente negro para trás. O game se passa em <em>Liberty City</em>, que desta vez faz alusões muito mais claras à cidade de <strong>Nova Iorque</strong>; é possível ver pontos característicos do local fielmente reproduzidos, como o <em>Empire State Building</em>, a <em>Estátua da Liberdade</em> e a <em>Ponte do Brooklyn</em>. O protagonista é, aparentemente, um imigrante <small>europeu</small> que vai à cidade procurando uma nova vida.<br />Graças à engine <strong>RAGE</strong> <small>(Rockstar Advanced Game Engine)</small>, os gráficos de <strong>GTA IV</strong> são impressionantes, com efeitos de luz e sombra muito bem feitos.<br />Durante o primeiro trailer, o protagonista conta que já matou, seqüestrou e vendeu várias pessoas, pretendendo mudar de vida na nova cidade. Vindo da Rockstar, sabe-se que isso só pode ser uma grande ironia, não é mesmo?</p>
<div id="around">
<dl>
<dt>Classificação Etária</dt>
<dd>17 Anos</dd>
<dt>Desenvolvedora</dt>
<dd>Rockstar North</dd>
<dt>Distribuidora</dt>
<dd><a href="http://www.rockstargames.com/">Rockstar Games</a></dd>
</dl>
</div>
</div>
<footer>
<p>Sou eu</p>
</footer>
</body>
</html>
Exemplo CSS:body{
font-family: "Segoe UI", "Tahoma", sans-serif;
background-color: #747474;
height: 100%;
margin: 0 auto;
}h1{
color: #454545;
}p{
margin: auto;
background-color: #C9C9C9;
color: #464646;
padding: 10px;
border: 3px solid #DDDDDD;
text-align: justify;
}dl{
background: #6F2F31;
width: 200px;
padding: 10px;
border: 10px #FFFFFF dashed;
}dt{
color: #FFF;
margin: auto;
}dd{
color: #B5B5B5;
}footer{
position: inherit;
bottom: 0;
display: block;
width: 100%;
clear: both;
}
.content{
min-height: 100%;
margin: 15px;
}
#around{
height: 100%;
min-height: 100%;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-align-items: center;
-webkit-align-items: center;
align-items: center;
-ms-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
Se puderem me ajudar, mandei o código e digam o que tenho a fazer. Obrigado!Discussão (10)
Carregando comentários...