元素"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将出现在"下面标题栏(，即使它只是一个简单的div或span)。我现在的解决方法是使用css' top来避免标题。我该怎么做，才能使div中的元素不会从header元素的下面开始呢?

谢谢!

Answer 1

如果您从navbar元素中删除fixed-top，则body将不再";

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

如果你想保留固定的页眉和页脚，你应该能够使用下面的东西，改编自这个答案

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

要使元素处于正常流程中，不要给它们设置position: fixed或position: absolute。使用float: right和float: left。如果你有一个固定或绝对的页眉，那么该元素之后的正常流将需要一个等于或略大于headerdiv元素的高度的margin-top。该边距将"填充"固定/绝对元素后面的空间。