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 https://www.rotary-site.org/completed4.php?su=websites-for-trf 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: https://jsfiddle.net/mattonit/bj1bqkja/ Sticky Footer using Flexbox: https://jsfiddle.net/mattonit/gpg89k5v/  

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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