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

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

@继承LayoutComponentBase
任何东西
@身体
任何东西，@（日期时间。今天。年）

app.css

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

...
.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;
...
    }

将此添加到

MainLayout.razor.css

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

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

是

顶行
（
3.5rem
）+
3rem
页脚的默认值之和