Blazor Server .NET6+Syncfusion中HTML元素无法占满100%高度求助

问题根源 #

• CSS百分比高度要求所有父级元素必须明确设置height:100%，否则子元素的height:100%会失效
• 浏览器默认给html/body设置了margin/padding，搭配100vh会让总高度超出视口，触发滚动条
• 未设置box-sizing: border-box时，padding会额外撑开元素总高度

具体修复步骤 #

1. 修改site.css基础样式 #

统一根元素高度与盒模型规则：

/* 全局盒模型重置，避免padding/margin额外撑开元素 */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

2. 调整MainLayout布局样式（MainLayout.razor.css） #

用Flex布局实现自适应高度，替代固定vh：

.page {
    display: flex;
    flex-direction: column;
    height: 100%; /* 继承html/body的100%高度 */
}

/* 顶部导航栏（根据实际类名调整） */
.top-row {
    height: 3.5rem; /* 按实际导航高度修改 */
    background-color: #f7f7f7;
    padding: 0 1rem;
    display: flex;
    align-items: center;
}

/* 内容区域自动填充剩余高度 */
.main-content {
    flex: 1; /* 关键：占据顶部栏之外的所有剩余空间 */
    padding: 1.5rem; /* 此处padding不会触发全局滚动条，Flex会自动计算剩余空间 */
    overflow-y: auto; /* 内容超出时内部滚动，避免全局滚动条 */
}

3. 对应MainLayout.razor结构调整 #

确保布局层级正确嵌套：

<div class="page">
    <div class="top-row">
        <!-- 顶部导航内容 -->
    </div>
    <main class="main-content">
        @Body
    </main>
</div>

补充说明 #

• 若Syncfusion组件自带额外margin/padding，用浏览器开发者工具（F12）查看元素盒模型，针对性调整样式
• 尽量避免直接用100vh，它会忽略浏览器地址栏/工具栏变化，在移动端或窗口缩放时易出现布局问题
• 若必须使用100vh，可通过calc抵消顶部内边距/导航高度：height: calc(100vh - 3.5rem)（数值按实际情况修改）

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