Topic: How can I locate a footer at the bottom of the page?
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?
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
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%;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
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?