How to set 3 sections "sticky" i dont know how to calll it :-)

Ask us anything
1

Hi,

i am playing around a little and now i have 3 sections, which is

  1. TopBar/Header
  2. Content
  3. BottomBar/Footer

image

The “TopBar” is sticky to the Top with Position - Top/Right/Left=0px & Height is set to 10vh
The “Content” is fixed with a 80vh of height
The “BottomBar” is sticky to the Bottom with Position - Bottom/Right/Left=0px & Height is set to 10vh

The problem is, the “Content” still behaves scrollable and i can not find a option to put all three sections together to give those sections a max hight. Basically i want to have all those sections to be “sticky” to any screen size and, yeah how to say it…

Is there any workaround for that or how you would do that???

I dont know how to explain, hope you understand what i mean :slight_smile:
I can as well post a video if needed.

Just for the overview (Orange=TopBar, Grey=Content, Blue=BottomBar)

image
image2181×1217 40.5 KB

2

Can you send us a link of your page or editor? However, overflow set to Hidden might help

3

Yeah i will publish the latest version and send.

But the overflow for the content or the header & footer

4

@luka

https://117f4738-1d28-4e96-a2d9-a8ffd31c5b47.weweb-preview.io/

5

Are you sure your content section is set to 80vh instead of 100vh? Also the top and bottom section don’t appear to be 10vh.

Check that and if it’s setup correctly please go to the editor and copy the editor link and send it to me in DM and I will take a look if it’s a bug.

6

It was changed for some reason, let me recheck please.

7

Crazy, now it works very well.
Still, thanks for your time.

1 Like