Element "tucked" under another element...and it shouldn't - css

Question

This should be a CSS style question, but it has some C#/Blazor components...that's why I tagged both.
Here my main layout:
<div class="container-fluid p-0 d-flex flex-column min-vh-100">
<div class="navbar fixed-top">This is the header</div>
<div class="content flex-grow-1">
#Body
</div>
<div class="navbar tiny-text fixed-bottom d-flex justify-content-center">
<div id="footer_div">This is the footer</div>
</div>
My problem is that whatever component that I have that takes place in #Body will appear "under" the header bar (even it's just a simple div or span). My workaround right now is use css' top to avoid the header. What do I have to do, so that the elements in the div won't start from underneath the header element?
Thanks!

Answer 1

If you remove the fixed-top from your navbar element the body will no longer "tuck" under the header.
<div class="container-fluid p-0 d-flex flex-column min-vh-100">
<div class="navbar">This is the header</div>
<div class="content flex-grow-1">
#Body
</div>
<div class="navbar tiny-text fixed-bottom d-flex justify-content-center">
<div id="footer_div">This is the footer</div>
</div>
</div>
If you want to retain the fixed-like header and footer you should be able to use something like the below adapted from this answer
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
overflow: auto;
}
<header class="navbar">This is the header</header>
<main class="content flex-grow-1">
#Body
</main>
<footer class="navbar tiny-text d-flex justify-content-center">
<section>This is the footer</section>
</footer>

Answer 2

To keep elements in normal flow don’t give them position: fixed, or position: absolute. Use float: right and float: left. IF you have a header that is fixed or absolute, then the normal flow that follows that element will need a margin-top equal to or slightly greater than the height of the header div element. The margin will ‘fill’ the space behind the fixed/absolute element.