Staff replied Helix Framework

Sticky footer

Asked by Felix Pena-Sommer 5 years ago Last activity 2 years ago

Dear all,

is there a way to define a sticky footer in the ultimate framework? It should be alway on the bottom of the page as long as the content is not larger than the page.
The reason therefore is, that I've got some problems with my menus in the boxed layout (see https://www.moerike-gymnasium.de/index.php/moerike-leben) and so I want to disable the boxed layout.
But know the compontent area should occupy allways the whole viewport.
Otherwise the footer is visible on the middle of the page, which is not really nice.

Best regards
Felix

4 replies

Rashida Rahman Staff

5 years ago

Hi there!

You can use the following code in your custom.css file:

#sp-footer { 
    position: fixed;
    width: 100%; 
    bottom: 0px; left:0px;
}

Hope this will serve your perpose!

Best Regards

Felix Pena-Sommer Asked this

5 years ago

Hi,

thanks for your answer, which solved partially my problem.
Partially because the sp-component was after the modification in the front of the footer.
So I added to the footer the css: z-index: 1;
That solved the problem, but now a small part of the sp-component is always behind the footer.
How can I manage it, so that the sp-component always finishes where the footer begins?
It starts also right below the header.
Is this possible?

Best regards
Felix

Rashida Rahman Staff

5 years ago

Hello!

There is a different solution to try.

Please use the below code instead:

#sp-maincomponent {
    min-height: calc(100vh - 189px);
}

Let me know the result!

Best Regards

xXx_DoMoDo_xXx

2 years ago · edited

Hello,

I have a similar problem to the thread author.

Only in my case, the contents of the page behind the footer show at the bottom. Which CSS could I use to solve the problem? See Link https://test3.cabtronix.ch/index.php/de/produkte Scroll down.

U can check it and see the problem wenn u change by #sp-footer to z-index: 0. Content on foreground.

Regard
Domo

Rashida Rahman Staff

2 years ago

Hi xXx_DoMoDo_xXx,

Thanks for your query.

Would you please ask a new question with screenshot pointing to the area to understand it better?

Best Regards

xXx_DoMoDo_xXx

2 years ago

Sorry for delay,

Is there a possibility that the footer, if the body text is too small, remains at the bottom of the browser and with larger text, only at the end of the body text is displayed?

Site: test3.cabtronix.ch

thanks
regard Domo

Rashida Rahman Staff

2 years ago

Hi,

What you are trying to achinve is not feasible or might need code customization. However, did you try this?

#sp-footer { 
    position: fixed;
    width: 100%; 
    bottom: 0px; 
    left:0px;
    z-index: 1;
}
#sp-maincomponent {
    min-height: calc(100vh - 182px);
}