Positioning section at bottom of screen *without* fixed positioning

I am trying to make a page with two bars - a fixed bar at the top, and a bar of equal size at the bottom which isn’t fixed - as the browser changes size these two bars stay the same size and an image between them changes size. Currently i have the top nav bar set to 74px height, fixed, and a background image in the hero section which is offset 74px from the top of the screen. I want this to change size so I have the section set to 92vh. The bottom section is positioned relative to the bottom of the hero section with a height of 74px. This works ok but as i make the browser size smaller the bottom bar gets moved off the bottom of the page.

how can I make this bottom bar sit at the bottom of the page when it opens, with a defined size, but also scroll normally (not fixed position)??

any help much appreciated


Here is my site Read-Only: https://preview.webflow.com/preview/philip-gouldings-first-project?preview=bccc1f38259b90ae265d83f8b46b7a49
(how to share your site Read-Only link)

Hello @theprune

I’m trying to understand the issue here,

You’re saying that you want the image background to change size?

And for this, the ‘bottom section’ is the bottom bar?

Thanks

Hi! one clarification -

  • yes, when the browser changes size I want the background image to change size but the white bars at the top and bottom of the screen to retain their size and position on the screen

  • when i say the bottom section i mean the bottom of what you can see in one browser window, there are other sections below those. What i am calling the bottom section is the white bar called ‘section 2’. i should have made that clearer…

I made a small video to show you how you can fix your section to the bottom

I hope this helps

aha! thankyou so much.

1 Like

I’m glad I could help