Topic: footer positioning

Chris Sweeney pro asked 4 years ago

Hi I want the footer to appear at the bottom of the screen, even when there isn't sufficient content to put it there; I don't want the footer to be fixed-bottom, as this affects all pages, including the ones where the content should force the footer lower. On page I have used #content {min-height: 380px;} which works fine for my laptop - but on a different screen, the footer might be half way down the browser window, not at the bottom. I've tried body (height: 100%;} without success Cheers Chris

Chris Sweeney pro answered 4 years ago

Thanks Bartlomiej That flexbox thing works a treat! Cheers Chris S

Hi, Chris! You're right - adding min-height isn't the best practice for the sticky footer. Some programmers on StackOverflow would recommend using position: fixedwith bottom: 0, but I think it's better to use flexbox instead. You can compare it yourself: Sticky Footer with position: fixed: Sticky Footer using Flexbox:  

Please insert min. 20 characters.


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



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.9
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No