ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
8
Jul
2017
#html
#css
#footer
#layout

CSS Sticky Footer

8 Jul, 2017

Hi there!

There are a lot of ways how to implement a sticky footer on the page that will always remain at a fixed position on the screen no matter whether the user scroll or not. It will be visible all the time at that specific place (often on bottom).

I would like to share my way how I added the sticky footer on my site.

Firstly, I added two separated

tags inside the body in index.html and thereby assigning two classes .container and .footer to them:

<body>
  <div class="container">
    ...
  </div>

  <div class="footer">
    ...
  </div>
</body>

The next step is creating the CSS styles in the index.css file and styling these two containers from index.html, where .container will get a margin-bottom with the value equal to the size of the .footer:

.container {
  margin-bottom: 60px;
}

And then .footer styles will be consisted of the following properties:

.footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0 auto;
}

That’s it. I hope this post helped you added a sticky (floating) footer to your site.

Tags | #html #css #footer #layout
Next: Clear Form in Redux when Navigating with React-Router

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy