元素 "tucked" 在另一个元素下......它不应该

Question

这应该是一个 CSS 风格的问题，但它有一些 C#/Blazor 组件...这就是我标记两者的原因。

这是我的主要布局：

<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>

我的问题是，在 @Body 中发生的任何组件都会出现在 header 栏的“下方”（即使它只是一个简单的 div 或 span)。我现在的解决方法是使用 css' top 来避免 header。我必须做什么，才能使 div 中的元素不会从 header 元素下方开始？

谢谢！

Answer 1

要保持元素正常流动，请不要给它们 position: fixed 或 position: absolute。 使用 float: right 和 float: left。 如果你有一个 header 是固定的或绝对的，那么跟随该元素的正常流将需要一个 margin-top 等于或略大于 header 的高度div 元素。边距将“填充”fixed/absolute 元素后面的 space。

Answer 2

如果您从 navbar 元素中删除 fixed-top，则 body 将不再“隐藏”在 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>

如果你想保留 fixed-like header 和页脚你应该能够使用类似下面改编自 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>

元素 "tucked" 在另一个元素下......它不应该

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

css

blazor

blazor-server-side