Positioning section at bottom of screen *without* fixed positioning

Design help General
1

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)

2

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

3

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…

4

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

http://cloud.ipagroup.co/rzuq

I hope this helps

5

aha! thankyou so much.

1 Like
6

I’m glad I could help