Footer is not fixed at the bottom

Question

The footer is not fixed at the bottom when the contents of the page are less than the window height. Below is the screenshot..

contents more than window size:

contents less than window height:

HTML :

<footer class="page-footer text-center font-small mt-4 wow fadeIn">


        <div class="pt-4">
          <a class="btn btn-outline-white" href="https://mdbootstrap.com/docs/jquery/getting-started/download/" target="_blank"
            role="button">Download MDB
            <i class="fas fa-download ml-2"></i>
          </a>
          <a class="btn btn-outline-white" href="https://mdbootstrap.com/education/bootstrap/" target="_blank" role="button">Start
            free tutorial
            <i class="fas fa-shopping-cart ml-2"></i>
          </a>
        </div>
        <!--/.Call to action-->

        <hr class="my-4">

        <div class="footer-copyright py-3">
          © 2019 Copyright:
          <a href="https://mdbootstrap.com/education/bootstrap/" target="_blank"> MDBootstrap.com </a>
        </div>
        <!--/.Copyright-->

      </footer>

CSS:

.main-container {
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px; /* height of your footer */
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}

@AndersSørensen No, at SO we don't want _"linked code"_ ... please read [mcve], which says a verifiable sample **within** the question itself — Asons, Oct 07 '19 at 19:02
I'm building a website using django and bootstrap. I have limited knowledge in HTML and CSS. I will post the CSS which effects the view when i do some changes. — Bharath, Oct 07 '19 at 19:03
@LGSon, …Minimal – Use as little code as possible that still produces the same problem …Complete – Provide all parts someone else needs to reproduce your problem in the question itself …Reproducible – Test the code you're about to provide to make sure it reproduces the problem. Anders asked code for the 1&2 points mentioned in the example you sent. So what was the necessity of you saying No? — Bharath, Oct 07 '19 at 19:11
@LGSon,I do follow the guidelines. But as mentioned in the doc, those three are the points to be followed when a code is posted." No, at SO we don't want "linked code" this was an irrelevant comment. I cannot post the whole CSS code since it has hundreds of lines for footer and i couldn't differentiate btn them as i'm a beginner in FE.Hope you understand! — Bharath, Oct 07 '19 at 19:23
@LGSon, Since this might be the day to day issue faced by FE devs and i was expecting some hints regarding what was going wrong, i didn't post the code. Lets wind up this argument here. Cheers!! — Bharath, Oct 07 '19 at 19:32
I understand LGSon. It is just a point of view conflict. Still trying on the issue, nothing seems to help. — Bharath, Oct 07 '19 at 19:47
You need position:relative aswell and set margin top negative. Check this link https://stackoverflow.com/a/689290/4548398 — Anders Sørensen, Oct 09 '19 at 05:12
Does this answer your question? [CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page](https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b) — Rohan Shenoy, Mar 09 '21 at 08:26

score 0 · Answer 1 · answered Mar 09 '21 at 07:00

0

strong text

just add fixed-bottom in footer class

footer class="page-footer text-center font-small mt-4 wow fadeIn fixed-bottom"

Hope this solves your problem

answered Mar 09 '21 at 07:00

Faayaq

1

score -1 · Answer 2 · answered Oct 07 '19 at 20:42

-1

This solved my issue. Now footer is fixed at the bottom regardless of the content and window size.

<footer style="position: fixed; bottom: 0; width: 100%;" class="page-footer text-center font-small mt-4 wow fadeIn  ">

answered Oct 07 '19 at 20:42

Bharath

113
1
1
10

Footer is not fixed at the bottom

2 Answers2