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

【问题标题】：How to add a footer in default MainLayout.razor?如何在默认 MainLayout.razor 中添加页脚？
【发布时间】：2021-04-15 16:41:43
【问题描述】：

在默认 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>

【问题讨论】：

标签： css blazor blazor-client-side

【解决方案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;
...
    }

注意：calc(100vh - 6.5rem) 中的6.5rem 是默认值top-row (3.5rem) + 页脚3rem 的总和。

【讨论】：