make footer into a sticky footer

Dazzling
1

Is there a way to modify the current footer to a sticky footer?

2

You can try to absolute position to the bottom of the page. But it really depends on your current setup and which part of footer you want to position like that (widgets, menu, copyright, social media icons etc.)

3

I mean I wish to have the whole black footer stripe stay at the bottom of the browser even when content does not fill the whole browser space. How can I achieve this?
footer position

4

Here’s the link of the screenshot

5

The easiest method to get this done is by changing minimum content height that will push footer to the bottoms.

#content {
    min-height: 800px;
}

You can tweak height to get the results you were looking for.

6

Hello Aigars,

I have the same problem. Your suggestion only works for one screen size. I’m looking for a solution that produces a footer staying on the buttom, if the page is not long enough and otherwise below the text.

I found this tutorial (Sorry, its German),
http://www.html-seminar.de/sticky-footer-fussleiste-ganz-unten.htm

however I did not find out which HTML-TAGs and classes have to be modified exactly. I therefore did not get it working.

Tanks für any help

7

You have already made some crazy modification to theme and back-to-top button now covers the entire footer area.

But to get footer to the bottom you might want to try something like this

#footer-area {
    position: absolute;
    bottom: 0;
    width: 100%;
}
8

Thank you for your quick answer.
Your idea makes the footer stick to the bottom, however, when scrolling down, it sticks to the page and overlaps it.

I solved my problem alonside with the “crazy modification” problem. Your of course complete right. I realized that the theme is too far away from what I was looking for and changed to an other one. Thank you anyway for your help. This blog is really great!

9

Is there a working solution nowadays for this?
Like karlchenotto mentioned, the latest solution by Aigars doesn’t scroll and instead overlaps with the content. Any help would be much appreciated. I’m using the Sparkling theme by the way - but yet the same issues.

10

Hello there,

I hope you are doing well today.

Please make a post in the Sparkling forum so that we can ensure the issues are organized and because it is another theme a different set of CSS code may be needed.

Here is a link to the forum:

Best Regards,
Support