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