Footer ( margin-top: auto not working)

In the past, we have used position absolute, footer position absolute and gave the footer a fixed height [which is not good really].,For as long as I can remember, using CSS to fix the footer to the bottom of the page has always been an issue. Today in this blog I will show you how to make a sticky footer that works on all devices I have tested on.,When we create a webpage, if we have very little text, you will find that the footer moves up the page, as you have clicked through to this webpage then I take it this is an issue for you.,Thank you for reading this blog about using CSS to position the footer at the bottom of the page, I hope you found it helpful.

BlogWebsite

I'm the body text

I'm the footer

html, body { background-color: #f0f0f0; color: rgb[65,78,87]; height: 100%; margin: 0; } body { display: flex; flex-direction: column; } #primaryHeader { background-color: rgb[65,78,87]; } .primary-header-image { position: relative; top: 0; } .page-footer { background-color: #414e57; padding-top: 50px; padding-bottom: 10px; }

Video liên quan

Chủ Đề