How can I locate a footer at the bottom of the page?


Topic: How can I locate a footer at the bottom of the page?

yeisonvelez11 asked 6 years ago

in the examples I see that it is only possible to send the footer with "fixed" position but if I do it in this way, the content will be below. I want to have the footer always be located at the bottom of the screen without the content of the other html elements being placed below the footer. How can it be done considering that the height of the footer varies with the responsive?


Arkadiusz Idzikowski staff commented 6 years ago

Did you add class 'fixed-bottom' to the footer element?


yeisonvelez11 commented 6 years ago

@Arkadiusz Idzikowski  Exactly, that I have done and it is fixed at the bottom. but if the content of my page is very large, the final content of my page is below the footer. I want the footer to be at the end respecting the html content


Arkadiusz Idzikowski staff commented 6 years ago

I tried to recreate this behavior on my end but with no success. Could you provide some screenshots and example code on which I would be able to debug this problem?


ochicaud pro premium priority answered 6 years ago

Hello, I have the same problem.

It's very easy to reproduce. Even on the mdboostap.com site : 

1 - type f12 to enter in dev mode

2 - in the container, remove every "section" eltements

3 - in <footer><div class="container ... remove  element <div class="row mt-3"> in order to empty the link zone

4 - the footer in no longer at the bottom

 


Arkadiusz Idzikowski staff answered 6 years ago

There is no built-in class for that. You would need to add your own styles. 

For example, when your footer is inside app component with 'app-root' selector: 

html,

body {

height: 100%;

position: relative;

}




app-root {

min-height: 100%;

display: block;

position: relative;

padding-bottom: 56px; // height of the footer

}

footer {

position: absolute;

bottom: 0;

width: 100%;

}

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: MDB Angular
  • MDB Version: 7.0.0
  • Device: web
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No
Tags