Footer Issue

Argent Arts · Post by **Argent Arts** » Tue Jul 04, 2023 5:17 pm

Hello. I hope that someone can help me.

I am trying to create a footer, but I've run into a bit of an issue. What I want is the footer to stick to the bottom edge of the browser UNLESS the page's content would push it off the bottom edge (thus, using the scroll bar to move down the page). So, if the content of the page is lite (not much there currently) and the browser is much taller vertically, the footer should appear at the bottom edge of the browser. But if the content of the page is long (say, two or more "pages" of content), then the footer should show up at the bottom of all that content (i.e. the user would have to scroll down through all the content to get to the footer).

Currently, whether I use a layer and set it to footer, the footer will do one of two things -

- It will sit at the bottom of the browser no matter what. So, if I make the browser short vertically, the footer ends up on top of the content, but if I make it tall, the footer remains at the bottom (as it should). The issue here is that it goes on top of the content instead of "stopping" at the bottom edge of the content.

- The footer will sit at the bottom of the page, regardless of the browser size. So, if the page is 1200px tall and the browser is 1000, then the footer is not seen and the end-user will have to scroll down to see it ... even if the content of the page is lass than 1200px.

Ultimately, what I want is for the footer to remain at the bottom of the browser at all times UNLESS the content of the page were to FORCE it beneath it (and, thus, off the page, forcing the end-user to scroll down through the content to get to the footer).

Sorry if I am being repetitive, I'm just not sure I am describing the issue well enough.

Any help would be appreciated and if you need clarity, please ask and I will do my best to answer.

Post by **Pablo** » Tue Jul 04, 2023 5:56 pm

There is no standard solution for this in HTML, a footer is either fixed on floating.
It cannot be both at the same time unless you implement a script to monitor the size of the browser window and whether scrollbars are active.

crispy68 · Post by **crispy68** » Tue Jul 04, 2023 6:00 pm

There is no easy way to make this work. There are some solutions using javascript and there are some CSS solutions. It depends on your footer. Is the footer the same height for the most part in all breakpoints? or will it change dynamically in height?

crispy68 · Post by **crispy68** » Tue Jul 04, 2023 6:31 pm

For floating designs, you can try the following CSS code set to between the <head> tags:

Code: Select all

<style>
body{min-height:100vh;}
#wb_LayoutGrid1{top:100vh;}
</style>

This example uses a layout grid set to sticky. You will need to change the words "LayoutGrid1" to match the ID of your layout grid. This can also be done using a flex container as the footer.

If you had to use a full width floating layer, this could be done also as such:

Code: Select all

<style>
body{min-height:100vh;}
#wb_Layer1{position:sticky;top:100vh;}
</style>

Change the text "Layer1" to match the ID of your floating layer.

Argent Arts · Post by **Argent Arts** » Wed Jul 05, 2023 1:00 am

Thanks for the help, everyone! At least I know I wasn't doing something incorrectly. I really appreciate the help here.

www.wysiwygwebbuilder.com

Footer Issue

Footer Issue

Re: Footer Issue

Re: Footer Issue

Re: Footer Issue

Re: Footer Issue