Problem with sticky footer

[Jack_Tauson_Sr]

I have a single page application with the HTML and CSS as shown here :

I am having trouble with keeping the footer at the bottom of the page. Although in the JS bin, the footer is at the bottom of the page, while navigating through the website, on some pages, I am able to scroll and go past the footer. Is there something in the CSS that’s not correct which is causing this problem?

[ronpat]

If you are going to report a problem with your sticky footer, please expunge the unnecessary code - HTML and CSS - from the page so we can focus on the problematic code. Think of the demo as a “working page” that demonstrates the issue without cluttering the issue with irrelevent code.

I am not familiar with jsBin so I may be missing something there.

I can’t tell how your sticky footer is supposed to work. Please take a look at a couple of @PaulOB’s sticky footers and see if you can adapt either to fill your needs. A sticky footer does not require much code.

How to keep footer on window bottom when low content - #2 by PaulOB

How to keep footer on window bottom when low content - #6 by PaulOB

https://codepen.io/paulobrien/pen/rxyEMN?editors=1100#0

There are others. Just search for sticky footer.

[donboe]

I’m a bit confused. First you say I have a single page application then you write on some pages, I am able to scroll and go past the footer? Anyway is this a template you downloaded? Do you have a link to the page? Seeing it would make things easier

[PaulOB]

@Jack_Tauson_Sr

Although in the JS bin, the footer is at the bottom of the page

No its not? The footer is following .wrap which is min-height:100% tall and therefore the footer is under the fold.

I should abandon whatever code you are using to make a sticky footer as it is not correct and won’t work in a responsive manner anyway. See the links Ron provided above for how to do it properly…