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

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!

question from:https://stackoverflow.com/questions/66064088/element-tucked-under-another-element-and-it-shouldnt

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>