How to make a custom footer lit element remain at the bottom of a page

Question

How can I make footer web component remain at the bottom of any page where it will be used? regardless of whether the content of the page is enough or not.

I have tried adding css properties such as position: fixed; and bottom: 0; but on same pages the content goes behind the footer just remains in place.

score 0 · Answer 1 · answered Aug 26 '19 at 14:00

0

if you do position fixed bottom 0, you can add bottom margin/padding to the underneath element to create space so that the footer doesn't overlap the content

CSS

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
}

.content {
   margin-bottom: 50px;
}

answered Aug 26 '19 at 14:00

David Ko

304
1
3
11

Let me try it out, I will let you know – Lenny Kiano Aug 27 '19 at 08:26
the footer height must be the same to the margin-bottom of the content? – Lenny Kiano Aug 27 '19 at 08:28
it doesnt have to be but it if its atleast equal youll guarentee the footer will never overlap the content – David Ko Aug 27 '19 at 16:48

How to make a custom footer lit element remain at the bottom of a page

1 Answers1