Problem with footer [duplicate]

Navigation
1

Oops,couldanyonegivemestrength?IhaveaproblemwiththefooterofasitethatIamcreatingitisnotgettingatthebottomofthepageitgetsawhitepartbelowitevenbeing100%ofthepage.

thehtmlcodefromfooter:

<footer><divclass="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>

The complete html code: 

<!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>

the css code: 

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;

}
    
asked by anonymous 26.12.2017 / 18:38

1 answer

0

As I replied in link you want that even if the page does not have enough content the footer appears in the fixed at the end of the view-port, so that the space is not blank and if the content is larger than the view-port, the footer should match the contents, staying below.

In this case you will have to combine position: relative with absolute , it's not obscure, just that the element "father" (usually a container) is in relative , in your case you have to create a "

With .page and with pseudo-element position 

html,body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
}

.page {
    position: relative; /* faz o footer fica com o absolute relativo ao .page - a mágica é esta */
    min-height: 100%; /% altura minima %/
}

/* criei esta classe para facilitar */
.mainfooter::before, .footer-inner {
    height: 100px; /* ajuste a altura aqui */
}

.mainfooter::before {
    content: " ";
    display: block;
}

.footer-inner {
   background: #0c0c0c;
   color: #fff;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}
<header>
    <span id="button-menu" class="fa fa-bars"></span>

    <nav class="navegacion">
        Navegacao
    </nav>
</header>

<div class="page">
    <main>
        <section id="slide">
            Slide
        </section>
        <section class="faq">
            Faq
        </section>
    </main>

    <footer class="mainfooter">
       <div class="footer-inner">
            conteudo do footer
       </div>
    </footer>
</div>

With flex: 

html,body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
}

body {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   width: 100%;
   height: 100%;
}

body > main {
    flex: 1; /*ocupa todo espaço menos a altura do footer */
}

body > footer {
    min-height: 100px;
    background: #0c0c0c;
    color: #fff;
}
<header>
    <span id="button-menu" class="fa fa-bars"></span>

    <nav class="navegacion">
        menu
    </nav>
</header>

<main>
    <section id="slide">
        slide
    </section>
    <section class="faq">
        faq
    </section>
</main>

<footer>
rodapé
</footer>
    
26.12.2017 / 19:04
Dictionary and repetition structure Error trying to save data in two tables at the same time