How can I make my footer stay at the bottom in all devices?

Question

I need my footer to stay at the bottom of the page (but not sticky) regardless of the page's content. I've tried the solutions on this question but the idea of adding a margin-top: 40em doesn't seem like the best solution. Someone else marked this question as a duplicate of this one, but their solution isn't working for me, hence this new question.

You can view the website here.

This is what my footer looks in a large screen:

Here's my code. I'm using Bootstrap 4.

.footer-container {
  margin-top: 30px;
  border-top: 1px solid #C1CFDF;
  padding: 20px;
  font-size: 0.9em;
}

<!-- Footer -->
<div class="footer">
  <div class="col-12 footer-container">
    <div class="col-12 footer-secondary text-center">
      <div class="row">
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <ul class="nav nav-left">
            <li>¿Necesitas ayuda? Contacta <a href="mailto:email@email.com" target="_blank">email@email.com</a></li>
          </ul>
        </div>
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
          <ul class="nav nav-right">
            <li class="nav-item dropup">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Country<i class="far fa-chevron-up pl-2"></i></a>
            </li>
            <li class="nav-item dropup">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Languages<i class="far fa-chevron-up pl-2"></i></a>
              <div class="dropdown-menu dropdown-menu-right">
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /Footer -->

probably a duplicate of https://stackoverflow.com/questions/51480958/bootstrap-4-footer-not-at-bottom/51481426#51481426 .but your footer, you want it sticky or not ? — G-Cyrillus, Oct 27 '20 at 13:58
Not sticky. I just need it to stay at the bottom, regardless if my page has little info or tons of information. — Paula, Oct 27 '20 at 14:00
okay, soyou have a duplicate question, i 'll link your question to it. Have fun coding — G-Cyrillus, Oct 27 '20 at 14:01
Can you show how you tried to implement the solution in the duplicate question? Then we can reopen and determine how to fix it. — Barmar, Oct 27 '20 at 18:21
If the duplicate does not work for you, do add the rest of your page to clarify your question , as i answered, if you use bootstrap, the footer is part of the whole layout you have and has to be seen so. You may not understand my answer or the duplicate out there, but without more information about what you really have and what you really try, there is not much more we can do to help ;) one will answer position fixed or absolute, another grid, another some margins, ... — G-Cyrillus, Oct 27 '20 at 18:51

score 0 · Answer 1 · answered Oct 27 '20 at 13:44

0

Set the position as ‘absolute’ and bottom as ‘0’. Like this:

.footer-container {
  margin-top: 30px;
  border-top: 1px solid #C1CFDF;
  padding: 20px;
  font-size: 0.9em;
position: absolute; 
bottom: 0;
}

That will stick the footer to the bottom, but if the page can scroll then it’ll be at the very bottom of the page rather than the viewport!

answered Oct 27 '20 at 13:44

Jon Nicholson

927
1
8
29

So that works for large screens (> 1200px). But on my notebook's screen, the footer overlaps the content. Is there a way to solve this without using media queries? – Paula Oct 27 '20 at 13:49

score 0 · Answer 2 · answered Oct 27 '20 at 13:53

if you are using bootstrap 4.x, based on the flex model, you should think the layout in its globality, not the footer on its own.

Untill you clarify the main structure of your html, i guess the site is standing in a .container, so here is an example how you could do it :

body {
  height: 100vh;
}

.footer-container {
  border-top: 1px solid #C1CFDF;
  padding: 20px;
  font-size: 0.9em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container h-100 d-flex flex-column">

  <!-- header ? -->
  <div class="row">header</div>
  <!-- / header  -->
  
  <!-- main ? -->
  <main> Main content</main>
  <!-- / main  -->
  
  <!-- Footer -->
  <div class="footer mt-auto">
    <div class="col-12 footer-container">
      <div class="col-12 footer-secondary text-center">
        <div class="row">
          <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
            <ul class="nav nav-left">
              <li>¿Necesitas ayuda? Contacta <a href="mailto:email@email.com" target="_blank">email@email.com</a></li>
            </ul>
          </div>
          <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12">
            <ul class="nav nav-right">
              <li class="nav-item dropup">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Country<i class="far fa-chevron-up pl-2"></i></a>
              </li>
              <li class="nav-item dropup">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Languages<i class="far fa-chevron-up pl-2"></i></a>
                <div class="dropdown-menu dropdown-menu-right">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /Footer -->
  </div>

built-in class used : h-100 d-flex flex-column and mt-auto

How can I make my footer stay at the bottom in all devices?

2 Answers2