footer positioning

Topic: footer positioning

Chris Sweeney pro premium asked 6 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

Add comment

Bartłomiej Malanowski staff pro premium answered 6 years ago

0 0 Best answer

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/

Add comment

Chris Sweeney pro premium answered 6 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

Chris Sweeney

Pro User Premium support

317Support score
25Questions 51Answers

0Snippets likes 0Snippets