Css “元素”；"；在另一个元素下…它不应该'；T

这应该是一个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中发生的任何组件都会出现在标题栏的“下方”（即使它只是一个简单的div或span）。我现在的解决方法是使用css的top来避免标题。我必须做什么，这样div中的元素就不会从header元素下面开始

---

谢谢

要使元素保持正常流动，不要给它们位置：固定，或位置：绝对使用float:right和float:left。如果标题是固定的或绝对的，则该元素后面的正常流将需要一个等于或略大于标题div元素高度的页边距顶部。边距将“填充”固定/绝对元素后面的空间。

如果从

navbar

元素中移除

固定顶部

，主体将不再“折叠”在标题下

这是标题
@身体
这是页脚

如果你想保留固定的页眉和页脚，你应该能够使用下面的内容

正文{
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.内容{
溢出：自动；
}

这是标题
@身体
这是页脚

对不起，这不就是它的工作原理吗，页眉>正文>页脚？我失踪了吗something@ZiaAhmad...the页眉/页脚/正文只是语义…我可以随意调用它们…这里的问题是中间的元素似乎跨越了整个视口，从而导致其元素显示在页眉下方。希望这能有所帮助。请提供一个屏幕截图，但据我所知，您应该在页眉后的元素上添加页边距顶部=页眉高度。@Nikhil…thx以便于及时回复…正如您所见，“页眉”并没有显式显示高度…在这种情况下，我定义页边距顶部的选项是什么？再次感谢！我希望这个问题是正确的solved@Nikhil...thanks接下来…我在道格拉斯·里德尔的带领下，一切都在进行中。我接受这个答案，认为它会带来副作用…当我滚动时，我失去了标题。好的是，我正在构建一个单页应用程序，因此不允许以任何方式滚动……我相信，如果页脚内容足够长，由于

固定底部

，正文也会“折叠”在页脚内容下。我添加了一个编辑，根据另一个答案改编，模仿flex的固定页眉和页脚行为。我接受了你的第一个建议，将h-100应用到中间的div（body），底部保持为固定底部，一切看起来都很棒！谢谢你的领导！