Positioning a sticky bar at the bottom of the screen

HTML & CSS
1

If a webpage doesn’t contain enough text up until the end of the fold, a sticky “call now” bar might appear flying somewhat above the middle of the fold, instead appearing as the last element above the fold.

Image to illustrate the sticky “call now” bar

1
11402×1080 94.3 KB

CSS pattern for the sticky “call now” bar

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    width: 100%;

My question

What would be a good way to keep the “call now” bar sticky but still always the last element above the fold?

position: absolute may do that but isn’t position: sticky the standard way?

2

I’ve moved this to the HTML/CSS category as your question is not about JS.

1 Like
3

If you ensure that there is one container before the sticky bar holding all the other content then you’d give that container a min-height of 100vh.

As mentioned in the other thread 100vh means something different on mobile so instead you would set html and body to height:100% and then use min-height:100% on that container.

1 Like
4

Here’s a quick demo of the above.

5

PaulOB
Thanks a lot,

If I want to avoid touching the CSS of my content management system templates,
maybe there is another approach I should contemplate?

6

Did you mean not touching the html?

You can’t do anything if you don’t add some css :slight_smile:

If you meant without touching the html then there probably is something else you could try but it depends on the structure of the html you currently have.

I’m on a mobile at the moment but I will have a look when I get back to my computer later today.

1 Like
7

It looks like youur html has the same structure as shown in my codepen above. You can add the rules to your mw-wrapper and body as shown in the codepen…

8

Sorry, instead “CSS” I meant “PHP”.

9

You should be ok as it looks like your structure matches the method I mentioned anyway. Just add the css and target your wrapper and html body elements as suggested in my codepen.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.