Topic: footer positioning
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
Add comment
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/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.5.9
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: No