如何在默认 MainLayout.razor 中添加页脚？

Question

在默认 Blazor 布局中添加页脚的正确 CSS 是什么？- 我尝试过一些方法但没有成功。我感谢您的帮助。

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            Anything
        </div>

        <div class="content px-4">
            @Body
        </div>
        <!-- ** How to make it stay fixed in the bottom? -->
        <footer>
            Anything, @(DateTime.Today.Year)
        </footer>
    </div>
</div>

Answer 1

app.css

...
html, body, #app {
    height: 100vh
    max-height: 100vh;
}
...

将其添加到MainLayout.razor.css

...
.main > footer {
    height: 3rem;
    max-height: 3rem;
}
.main > .content {
    height: calc(100vh - 6.5rem);
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
}
...


@media (min-width: 641px) {
...
    .sidebar {
        max-height: 100vh;
        overflow-y: auto;
...
    }

注意：6.5remin是默认值( ) +页脚的calc(100vh - 6.5rem)总和。top-row3.5rem3rem