如何在Blazor默认MainLayout.razor下添加适配多端的页脚？

问题现状 #

当前布局在小屏幕显示正常，但大屏下页脚位置异常。尝试在<div class="page">容器内的<div class="sidebar">和<main>之后添加<footer>标签，需要实现符合需求的布局效果。

核心需求 #

• 适配多屏幕尺寸的页脚布局
• 实现粘性侧边栏+滚动主体：页面顶部时侧边栏固定，滚动到底部时侧边栏随内容一起滚动，页脚始终位于侧边栏和主体内容的下方
• 优先使用Bootstrap 5.3.7实现
• 支持Blazor CSS隔离方案

修改后的HTML代码 #

<div class="page d-flex flex-column min-vh-100">
    <!-- 大屏下的侧边栏+主体容器 -->
    <div class="d-flex flex-grow-1">
        <div class="sidebar">
            <NavMenu />
        </div>

        <main class="flex-grow-1">
            <div class="border-bottom border-1 border-secondary-subtle top-row px-4">
                <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
            </div>

            <article class="content px-4">
                @Body
            </article>
        </main>
    </div>
    
    <footer class="footer bg-dark text-white py-2 px-4">
        <p class="text-white m-0"><small>&copy; @(DateTime.Today.Year) "My Company" All rights reserved.</small></p>
    </footer>
</div>

修改后的CSS代码（Blazor CSS隔离） #

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row ::deep a,
.top-row ::deep .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
}

.top-row ::deep a:hover,
.top-row ::deep .btn-link:hover {
    text-decoration: underline;
}

.top-row ::deep a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row ::deep a,
    .top-row ::deep .btn-link {
        margin-left: 0;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }
}

@media (min-width: 641px) {
    .sidebar {
        width: 250px;
        position: sticky;
        top: 0;
        align-self: flex-start; /* 确保侧边栏从顶部开始定位，随内容滚动到底部 */
        min-height: calc(100vh - 48px); /* 减去footer高度，确保页脚能显示在下方 */
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row,
    article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

关键修改说明 #

1. 布局结构调整：将<sidebar>和<main>包裹在一个新的d-flex flex-grow-1容器中，让它们在大屏下横向排列，<footer>则作为page容器的直接子元素，确保始终位于内容下方。
2. 侧边栏粘性优化：大屏下给侧边栏添加align-self: flex-start，并设置min-height: calc(100vh - 48px)（48px为footer的高度），实现顶部固定、底部随内容滚动的效果。
3. Bootstrap类复用：使用Bootstrap的d-flex、flex-column、flex-grow-1、min-vh-100等类替代自定义flex布局代码，减少冗余样式。
4. 小屏适配：小屏下重置侧边栏为相对定位、宽度100%，确保移动端布局正常。

内容的提问来源于stack exchange，提问作者DevQt