Opa alguém poderia me dar um força? Estou com um problema com o footer de um site q estou criando ele não está ficando no final da pagina ele fica com uma parte branco em baixo dele mesmo estando em 100% da page .
o codigo html da parte do footer :
<footer>
<div class="direitos">
<div class="textoo">
<h3>12333456</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
</div>
</div>
</footer>
O Codigo html completo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Secure Elo Bosting</title>
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<header>
<span id="button-menu" class="fa fa-bars"></span>
<nav class="navegacion">
<ul class="menu">
<!-- TITULAR -->
<!-- TITULAR -->
<li><a href="#"><span class="fa fa-home icon-menu"></span>Inicio</a></li>
<li class="item-submenu" menu="1">
<a href="#"><span class="fa fa-suitcase icon-menu"></span>Serviços</a>
<ul class="submenu">
<li class="go-back">Voltar</li>
<li><a href="#">MD10</a></li>
<li><a href="#">Elo Boosting</a></li>
<li><a href="#">Duo Boosting</a></li>
<li><a href="#">Vitorias</a></li>
</ul>
</li>
<li><a href="#"><span class="fa fa-envelope icon-menu"></span>Duvidas Frequentes</a></li>
<li><a href="#"><span class="fa fa-tag icon-menu"></span>Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="slide">
<div class="slidee">
</div>
</section>
<section class="faq">
<div class="row">
<h2>FAQ</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
<div class="faqq">
<a href="faq.html">
<img src="images/faqq.png"alt="faq">
</a>
</div>
</div>
</section>
</main>
<footer>
<div class="direitos">
<div class="textoo">
<h3>12333456</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</p>
</div>
</div>
</footer>
</body>
</html>
o codigo css:
body{
margin: 0;
background-color: # 161625;
}
.slidee {
margin: 0px;
overflow: hidden;
min-height: 300px;
background-image: url(../../image/BannerWithText.png);
background-position: top center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: cover;
}
.direitos
{
overflow: hidden;
background-color: #161625;
color: #000000;
}
.textoo {
color: #79001c;
height:auto;
margin: auto;
position: relative;
text-align: center;
font-family: 'Cuprum', sans-serif;
font-size: 13px;
color: #fff;
font-weight: 400;
line-height: 20px;
}
.row
{
display: block;
overflow: hidden;
background-position: top center;
height:auto;
background-repeat: no-repeat;
color: #dad9d9;
background-attachment: fixed;
background-size: cover;
}
.row h2
{
color: #ffa8a8;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
font-size: 48px;
text-align: center;
margin-bottom: 10px;
}
.row h1
{
color: #ffa8a8;
position: center top;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
font-size: 48px;
text-align: center;
margin-top: 50px;
}
.row p
{
margin: auto;
width: 960px;
font-family: Oswald;
color: #020202;
font-size: 20px;
font-weight: 400;
line-height: 20px;
text-align: center;
padding-bottom: 30px;
margin-bottom: 10px;
}
.faq .faqq
{
overflow: hidden;
position: relative;
height:97px;
width: 97px;
margin: auto;
margin-bottom: 35px;
}
.container
é o elemento que deve conter o conteudo e o rodape, ele pode ser até o propriobody
ao invés de criar um container, vou fazer um exemplo pra vc testar.