How to have footer at the bottom always but not set its position as fixed (because it comes it between of the actual content)

Question

am not able to keep footer at the bottom, I found a way online i.e to keep its css position as fixed. However, if I keep it fixed it is at bottom but over the actual content. How to solve this and have to footer at the bottom like real sites have?

If not possible with CSS then maybe bootstrap?

You can try to use "position=absolute" and "bottom=0" in your style... — Donada, Dec 23 '19 at 13:51
Look at this example: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ — Donada, Dec 23 '19 at 13:53
Lucky me. .. Next time when you post a question. .. Post also information that could help to see the problem. — Ingus, Dec 23 '19 at 13:56
@Donada I tried this one as well but problem with this is it having extra space between the content and footer — Jack, Dec 23 '19 at 13:57

Ingus · Answer 1 · 2019-12-23T14:01:59.313

0

Fast answer:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;
}
</style>
</head>
<body>

<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>

Internet is full with things you need: https://www.w3schools.com/howto/howto_css_fixed_footer.asp

This is what you want: https://css-tricks.com/couple-takes-sticky-footer/

edited Dec 23 '19 at 14:01

answered Dec 23 '19 at 13:50

Ingus

1,026
12
34

I used the code from the same site you mentioned. When there is content on the page and user has to scroll the footer is not at the bottom it overlaps the content. – Jack Dec 23 '19 at 13:53
This page i for you: https://css-tricks.com/couple-takes-sticky-footer/ – Ingus Dec 23 '19 at 14:01

How to have footer at the bottom always but not set its position as fixed (because it comes it between of the actual content)

1 Answers1