Search code examples
htmlcssfooter

How to put the Footer on the end of the page?

I don't want it to be fixed on the bottom, i just want it to be at the end even if the page has no content.

As you can see... the problem is it:

enter image description here

i searched on google about it, and i tried to put some CSS like:

footer {
    bottom: 0;
    position: absolute;
    width: 100%;
}

But it don't worked.

<!-- Footer -->
<footer class="page-footer font-small teal pt-4 bgFooter rodape">

    <!-- Footer Text -->
    <div class="container-fluid text-center text-md-left">

      <!-- Grid row -->
        <div class="row">

        <!-- Grid column -->
            <div class="col-md-12 text-center mt-md-0 mt-3 text-light" style="font-family: 'Quicksand', sans-serif;">

              <!-- Content -->
                <h5 class="text-uppercase pb-3">Social</h5>

                <div class="mb-4">

                    <a class="btn btn-outline-danger pl-3 pr-3" href="" target="_blank"><i class="fab fa-facebook-f"></i></a>

                    <a class="btn btn-outline-danger ml-3 mr-3" href="" target="_blank"><i class="fab fa-twitter"></i></a>

                    <a class="btn btn-outline-danger" href="" target="_blank"><i class="fab fa-instagram"></i></a>

                </div>

            </div>

        </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Text -->

    <!-- Copyright -->
    <div class="footer-copyright text-center text-light small ml-2 py-3" style="font-family: 'Quicksand', sans-serif;">© 2018 Teste |
        <a href="?p=privacidade" class="linkPolitica" style="font-family: 'Quicksand', sans-serif;"> Política de privacidade</a>
    </div>
    <!-- Copyright -->

</footer>
  <!-- Footer -->
Solution

  • There's several methods to do this. Let's start with the most straight forward method.

    If your footer height is set (Will not change, regardless of browser width or footer content) you can use a negative margin on the footer.

    Let's take this html structure as an example:

    <body>
  <div class="container">
    <div class="content"></div>
    <div class="footer"></div>
  </div>
</body>


html,
body {
 height: 100%; // First we set the height to make sure the body is always atleast big enough
}

.container {
  min-height: 100%; // The container will always be 100% height at minimum;
}

.content {
  padding-bottom: 100px; // This is set to the footer height
}

.footer {
  height: 100px; // The footer has a set width
  margin-bottom: -100px; // We move the footer in the negative space that was created by the padding
}

    Recommended:

    It get's a little more difficult when the footer height is not set. This will most likely be the case, since your website might be responsive.

    In this case we will be using flexbox.

        html, 
    body {
      height: 100%;
      margin: 0;
    }
    
    .container{
      display: flex; 
      flex-direction: column; 
      height: 100vh;
    }
    
    .content {
      background: gray;
      flex: 1 0 auto; 
    }
    
    .footer {
      background: blue;
      height: 30px;
      flex-shrink: 0; 
    }
    <div class="container">
  <div class="content"></div>
  <div class="footer"></div>
</div>

    We set the container to flex. Child divs in a flex container "grow" to fill their parent. We set flex to column to display them under eachother rather than next to eachtother. This container is set to 100vh. vh stands for "Viewport height", or the height of the window. The content is set to flex: 1 0 auto. This will allow it to grow 1, but not shrink 0, while allowing it's size to be auto

    The footer is to not ever shrink flex-shrink: 0, regardless of the size of other content.

    You can also take a look at css grid. However since I assume you are somewhat new to this, I recommend sticking with flex for now! Flexbox is wonderful once you realise what it can do.