How To Make The Footer Fixed Through Scrolling

I am setting a footer and I want it to be fixed at the bottom even if I am at the top of the page the footer is still visible I tried using position: fixed , flex But none of them

Solution 1:

you got to have a lot of content that is first of all scrollable and then give your footer div the following properties:

CSS

position: fixed;
    left: 0;
    bottom: 0;

• One small note is that you got to have some content inside the footer HTML element in order for it to even render I provided the following text A Footer! (shown in the example below)

Other than giving a position: fixed you need to guide the div where to be fixed it. Its default is to be fixed top left I believe. So to have it fixed to the bottom you can add left: 0 and bottom: 0 to have it behave as you desire.

Code Playground Example

I made a small example for you to check out that is working feel free to play around here It looks like this and as you can see the scroll handle is midway through the scroll track marked in red while the footer is fixed to the bottom as you wanted it to.

Demo

One Small Note

position: fixed is what you desire. It will fix the divs position without being dependent on scroll event. position: sticky is a sort of combination of position: relative in default that in turn will shift to become position: fixed when you scroll down enough and the div will then be fixed. - position: sticky is currently experimental and not supported in IE.

Solution 2:

You can set footer fixed to bottom of the page no matter how much content is available in your page. The footer will remain at the bottom of your browser window by using below given css code.

footer {
  position: fixed;
  bottom: 0;
}