时间戳

首页 > 解决方案 > 如何在默认 MainLayout.razor 中添加页脚？

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>

标签： cssblazorblazor-client-side

解决方案

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.5remincalc(100vh - 6.5rem)是top-row( 3.5rem) +3rem页脚的默认值的总和。

推荐阅读