Topic: Footer does not stick to the bottom page

Adam Adamczyk free asked 5 years ago


In case of small content in main layout footer goes up when it should be located in the bottom page

http://figaro.com.pl/adam/mdb/admin_footer.png

 


Tech Labx free commented 5 years ago

Try adding the "fixed bottom" class to the footer and see if it works. It works for fixing social buttons to the bottom of a sidenav.

Adam Adamczyk free commented 5 years ago

Nope. Same behavior. <!--Footer--> <!--Copyright--> <div> <div><!--Footer--></div> <div><footerclass="page-footer center-on-small-only pt-0 mt-5 fixed bottom"></div> <div><!--Copyright--></div> <div><divclass="footer-copyright"></div> <div><divclass="container-fluid"></div> <div>&copy; 2017 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a></div> <div></div></div> <div></div></div> <div><!--/.Copyright--></div> <div></footer></div> <div><!--/.Footer--></div> </div> <pre> </pre> <!--/.Copyright--> <!--/.Footer-->

MDBootstrap staff answered 1 year ago



Try to implement my solution: https://jsfiddle.net/mattonit/gpg89k5v/

Adam Adamczyk free commented 5 years ago

Thanks. Apparently it starts to work fine with "fixed-bottom" class.

AP foto free commented 3 years ago

Your solution link works perfect! Thank you.


Marina Pinto free answered 5 years ago


Your code has errors
<footerclass="page-footer center-on-small-only pt-0 mt-5 fixed bottom">

There has to be a space before the word "class" in general and a hyphen "-" between fixed and bottom.
so <footer class="fixed-bottom..... (in any order you want them in)

See below

<!–- Footer -–>
<footer class="page-footer center-on-small-only pt-0 mt-5 fixed-bottom">
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
</div>
</div>
<!--/.Copyright-->
</footer>
<!–- /.Footer -–>


Adam Adamczyk free commented 5 years ago

It was mistake in my copy and paste. In fact in my sources files this section is the same as you wrote.

Marina Pinto free commented 5 years ago

I though it strange as it happened to all classes :) Is it working now? - with the "fixed-bottom" (as opposed to having the space)

Adam Adamczyk free commented 5 years ago

No problem still persists.

AP foto free commented 3 years ago

If you have a dynamic page when it has enough content the fixed-bottom doesn't work. The footer stay there on top of the content. Bartlomiej Malanowski has the solution link.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags