MAUI Blazor布局中如何调整主体高度以避开固定定位的顶部/底部栏

问题根源 #

使用position: fixed的元素会脱离正常文档流，页面主体内容不会自动为它们预留空间，导致内容被栏覆盖；而sticky定位失效是因为它依赖父容器作为滚动上下文，父容器滚动时栏会随之移动。

方案1：给主体内容添加内边距（适配fixed定位） #

如果坚持使用fixed定位，只需给主体内容添加对应栏高度的内边距，让内容避开顶部和底部栏：

1. 修改布局组件结构，将导航和主体内容包裹在容器中：

@inherits LayoutComponentBase
<AppBarTop />
<div class="main-content">
    <Navigation />
    @Body
</div>
<AppBarBottom/>

2. 添加对应CSS样式：

/* 顶部栏保留fixed定位，补充定位细节 */
.top-app-bar {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 120px;
    width: 100%;
    background-color: #323232;
    color: white;
    position: fixed;
    top: 0;
    z-index: 100; /* 确保栏在内容上方 */
}

/* 主体内容容器，预留栏的空间 */
.main-content {
    padding-top: 120px; /* 等于顶部栏高度 */
    padding-bottom: 80px; /* 替换为你的底部栏实际高度 */
    min-height: 100vh;
    box-sizing: border-box; /* 内边距不会增加容器总高度 */
}

/* 底部栏样式示例 */
.bottom-app-bar {
    position: fixed;
    bottom: 0;
    height: 80px; /* 替换为你的实际高度 */
    width: 100%;
    background-color: #323232;
    color: white;
    z-index: 100;
}

方案2：使用Flex布局（更稳定的跨平台方案） #

放弃fixed定位，用Flex布局让页面结构自动适配，避免脱离文档流的问题：

1. 修改布局组件为Flex容器：

@inherits LayoutComponentBase
<div class="app-layout">
    <AppBarTop />
    <div class="main-content">
        <Navigation />
        @Body
    </div>
    <AppBarBottom/>
</div>

2. 添加Flex布局样式：

.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 让布局占满整个视口高度 */
}

/* 顶部栏去掉fixed定位 */
.top-app-bar {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 120px;
    width: 100%;
    background-color: #323232;
    color: white;
}

/* 主体内容自动填充剩余空间，超出时可滚动 */
.main-content {
    flex: 1;
    overflow-y: auto;
}

/* 底部栏样式示例 */
.bottom-app-bar {
    height: 80px; /* 替换为你的实际高度 */
    width: 100%;
    background-color: #323232;
    color: white;
}

方案对比 #

• 方案1适合需要fixed定位的特殊场景，但需手动维护栏高度与内边距的对应关系。
• 方案2更适配MAUI Blazor的跨平台场景，无需处理定位脱离文档流的问题，布局更稳定，滚动时栏固定在上下边缘的效果和fixed一致，兼容性更好。

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