Stable footer in dynamic template with multiple pages

help
1

I am using dynamic template and have set up multiple templates in order to display multiple pages after clicking button within a route/url (thanks to this post Use same url but load different pages/screens)
The problem is that the multiple templates/screens do not have same width but i need in all of them to display same header and footer, so I use this

<template name=''experiment">
    {{> header}}
    {{>Template.dynamic template=stepTemplate data=stepData }}
    {{> _footer}}
</template>

<template name="_footer">
    <div class="navbar-light bg-light border-top border-white justify-content-end" style="margin-top:10px">
        <nav class="d-flex align-items-end justify-content-end navbar-light bg-light border-bottom border-white p-2">
        </nav>
    </div>
</template>

and as a result the footer sometimes appears a bit upper from the bottom of the page instead of the bottom I have used also

class=fixed-bottom

but the problem is that it hides some of the page elements before the end . What is the right way to do it?