0
I’m studying a little CSS. And I’m having a hard time leaving the footer at the bottom of the site, regardless of the content size. To illustrate better I made this example if I put this way the footer is fixed at the bottom of the page, but on the rest of the content
<!DOCTYPE html>
<html>
<head>
<title>Como fixar rodape na pagina capa</title>
<meta charset="utf-8">
<style>
html, body {
min-height: 100%;
}
.conteudo {
position: relative;
padding: 10px 10px 10px 10px;
margin: 0;
padding-bottom: 10px;
}
.footer {
position: fixed;
margin-bottom: 0;
bottom: 0;
background-color: blue;
color: #FFF;
width: 100%;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="conteudo">
<h1>Minha página</h1>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
<p>Meu conteúdo</p>
</div>
<div class="footer">
<footer>
Rodapé da página
</footer>
</div>
</body>
</html>
If I change to
.footer {
position: relative;
margin-bottom: 0;
bottom: 0;
}
When the site content is smaller than the screen size, the footer (footer) is in the middle of the screen. How do I always leave the footer at the bottom of the browser screen regardless of the amount of content?
Try Footer always at the bottom of the page.
– Guilherme Nascimento