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 free asked 5 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 5 years ago

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

yeisonvelez11 free commented 5 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 5 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?

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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%;

}