Problem with footer

Question

Problem with footer

Asked 6 years, 6 months ago

Viewed 603 times

1

Would somebody give me a hand? I’m having a problem with the footer of a site q I’m creating it is not getting at the end of the page it gets a white part at the bottom of it even being at 100% of the page .

the html code of the footer part :

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

The full 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;

}

1

Here I explain how to leave it at the bottom of the page: https://answall.com/a/205755/3635, even if the content on the page is low.

– Guilherme Nascimento

2017/12/26 at 17:41
.container { position: relative; /does the trick :)/ min-height: 100%; /* sets the minimum height*/ background: #fcfcfc; } opa mano I didn’t understand mt well this part I’ll have create a div with name conteiner?

– Felipe

2017/12/26 at 17:44
the .container is the element that should contain the content and the baseboard, it can be up to the own body instead of creating a container, I’ll make an example for you to test.

– Guilherme Nascimento

2017/12/26 at 17:46
Ah then in the case type the container in my css would be the . slideee? q I created a Section?

– Felipe

2017/12/26 at 17:47
Pq inside my body has a <header></header> with the menu has a <main></main> with a Section and has a footer with 2 div.

– Felipe

2017/12/26 at 17:49
[email protected] Is this your work email bro? I am in need of a job q i believe I q is in html + javascript.

– Felipe

2017/12/26 at 17:52
To soften this in an easy way just put in Body the same background-color Footer. To fix Footer at the bottom of the page study Guilherme’s answer

– hugocsl

2017/12/26 at 18:03
1

I already managed to tidy up with the topic @Guilhermenascimentop. got cool agr ^^.

– Felipe

2017/12/26 at 18:03

Show 3 more comments

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2017-12-26T18:04:11+00:00

How did I respond in /a/205755/3635 you want that even if the page does not have enough content the footer appears in fixed at the end of the view-port, so that the spacing is not blank and if the content is larger than the view-port the footer should accompany the content, being below.

In this case you will have to match position: relative with absolute, is not at all obscure, it is enough that the "parent" element (usually a container) is in relative, in case you have to create a "parent" element called .page (can give the name you want) or you can simplify using flex

With `position` and with the pseudo-element `::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>

Flex-ply:

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>

Problem with footer

1 answer

With position and with the pseudo-element ::before

Flex-ply:

With `position` and with the pseudo-element `::before`