1

inserir a descrição da imagem aqui

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;

}
8
  • 1
    Aqui eu explico como deixar ele no final da página: pt.stackoverflow.com/a/205755/3635, mesmo que o conteudo na página seja pouco.
    – Syzoth
    Commented 26/12/2017 às 17:41
  • .container { position: relative; /*faz a mágina :)*/ min-height: 100%; /* define a altura minima*/ background: #fcfcfc; } opa mano eu não entendi mt bem esta parte eu vou ter criar uma div com name conteiner?
    – Felipe
    Commented 26/12/2017 às 17:44
  • o .container é o elemento que deve conter o conteudo e o rodape, ele pode ser até o proprio body ao invés de criar um container, vou fazer um exemplo pra vc testar.
    – Syzoth
    Commented 26/12/2017 às 17:46
  • Ah então no caso tipo o conteiner no meu css seria o .slideee? q eu criei um section?
    – Felipe
    Commented 26/12/2017 às 17:47
  • 1
    Já consegui arrumar com o topico do @GuilhermeNascimentoP. entendi legal agr ^^.
    – Felipe
    Commented 26/12/2017 às 18:03

1 Resposta 1

0

Como respondi em https://pt.stackoverflow.com/a/205755/3635 você deseja que mesmo que a página não tenha conteudo o suficiente o rodapé apareça no fixo no final do view-port, para que não fique o espaçamento em branco e se o conteudo for maior que o view-port o rodapé deve acomapanhar o conteudo, ficando abaixo.

Neste caso você terá que combinar position: relative com absolute, não é nada obscuro, basta que o elemento "pai" (geralmente um container) esteja em relative, no seu caso tiver que criar um elemento "pai" chamado .page (pode dar o nome que desejar) ou então pode simplificar usando flex

Com position e com o pseudo-elemento ::before

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>

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

0

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .