Question Footer fixed to the bottom of every page

[stas3dart]

Hi there, using Elementor Pro, with a custom footer. On some pages, that have less content, the footer isn't at the bottom. Tried sticky options and the rest and couldn't get it to work. Would be great if someone could suggest a workaround to this.

 

[Tonio]

It's probably because Elementor doesn't know what to do with the empty space between the content of th page and the bottom. Did you set anything to a fixed height? Maybe you used a fixed height for sections? It might help if you set the bottom section for the page to 'standard' instead of 'minimum height'. Otherwise, add a separator to the page to stretch the page height.

 

[Community]

stick footer to bottom of the page

You could try doing something like this to stick footer to bottom of the page :

Give the section an ID or class. Then add this CSS in the global CSS.

.yourclass {
    width:100%;
    position:relative;
    top:100vh;
}

 

[lutenist]

stick footer to bottom of the page

You could try doing something like this to stick footer to bottom of the page :

Give the section an ID or class. Then add this CSS in the global CSS.

.yourclass {
    width:100%;
    position:relative;
    top:100vh;
}

I did this in the Elementor Pro theme builder for the footer section. I set this in the Advanced > Custom CSS.
For me, it pushes my footer down so much that I have to scroll to see it.

Is there a way to have the footer at the bottom of the view height without it being sticky (where you always see it even though you scroll)?

 

[SolutionX]

.yourclass {
width:100%;
position:relative;
top:9vh;
}


The above is what i use you can try top:9vh; or top:10vh;
What have noticed is that different website themes footers and builds work different its bets you manually set the top till you get the right settings for your site, above is what i use and it works well for me.

 

[Peter L]

Edit the main section on the page > Layout tab > Layout section > change height to "Fit To Screen".

 

[PluginsForWP]

Please share a link to your website, we will help you.

 

[th0msky]

I think I have kind of a similar problem;

you see. I want a footer to stick on the bottom of my page. But I got certain pages which are filled with content where you don't have to scroll down on the page and I don't want you to do so.

Now if I add the footer, the page becomes longer by that amount of VH or %. Kind of obvious because I think elementor wants you to be able to scroll that certain part down to be able to see all the content on your page. But I don't need it to scroll down.

Is there a way to have a fixed position of the footer without the page being able to scroll down?

(i've tried it with the page having a VH of 93% since my footer is 7% but I kind of find this a weird work around since I also want my footer to be transparent so i want to use the full height of the page.)

 

[Mululu]

After trying a little, I found the optimal solution for myself.

Note: Elementor Pro (certainly works without Pro, only then the HTML tag has to be added manually)

My content (posts & pages) is created with templates from the Elementor Theme Builder.

I gave each template the HTML tag: main.

Then I added the following code:

main{
    min-height: calc(100vh - 545px);
}

The 545px correspond to the sum of my header and footer.

If you still need help contact me.