Blazor中实现网格填满<article>@Body区域并内部滚动的问题

article {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto; /* 仅在article内部显示垂直滚动条 */
  box-sizing: border-box; /* 防止padding或border撑开容器宽度 */
}

2. 自定义网格容器样式（替代Bootstrap的container/container-fluid） #

放弃使用Bootstrap自带的container类，直接给网格外层容器写样式，避免框架自带的内边距干扰：

.grid-wrapper {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

在Blazor页面中按如下方式使用：

<article>
  <div class="grid-wrapper">
    <!-- 放置Radzen或DevExpress网格组件 -->
    <RadzenDataGrid Data="@yourDataSource" />
    <!-- 或 <DxDataGrid Data="@yourDataSource" /> -->
  </div>
</article>

3. 覆盖网格组件的默认边距 #

部分UI组件自带默认边距或内边距，直接用CSS针对性覆盖：

/* Radzen网格调整 */
.radzen-data-grid {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* DevExpress网格调整 */
.dx-data-grid {
  margin: 0;
  padding: 0;
  width: 100%;
}

如果不清楚组件的具体类名，按F12打开浏览器开发者工具，选中网格元素即可查看对应的CSS类。

4. 确保父容器高度生效 #

如果

/* 假设<article>的父容器类名为main-layout */
.main-layout {
  width: 100%;
  height: 100vh; /* 占满浏览器视口高度，可根据实际布局调整 */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}